Vue.js 樣式綁定_ZenDei技術網路在線

Vue.js 樣式綁定

-Advertisement-

可以用 v-bind 來設置樣式屬性。 Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表達式的結果類型除了字元串之外，還可以是對象或數組為 v-bind:class 設置一個對象，從而動態的切換 class <!DOCTYPE html> <html> <he ...

可以用 v-bind 來設置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表達式的結果類型除了字元串之外，還可以是對象或數組

為 v-bind:class 設置一個對象，從而動態的切換 class

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="{pink:show}">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      show:true
    }
  })
  //vm監聽事件變化，第一個參數是新值，第二個參數是舊值
  //kilometers值發生改變時，執行回調
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值為: " + oldVal + "，修改後值為: " + newVal;
  })
</script>

也可以在對象中傳入更多屬性用來動態切換多個 class

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="{pink:show,blue:show2}">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      show:false,
      show2:true
    }
  })
  //vm監聽事件變化，第一個參數是新值，第二個參數是舊值
  //kilometers值發生改變時，執行回調
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值為: " + oldVal + "，修改後值為: " + newVal;
  })
</script>

也可以直接綁定數據里的一個對象

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="myclass">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      myclass:{
        "pink":true,
        "blue":false
      }
    }
  })
  //vm監聽事件變化，第一個參數是新值，第二個參數是舊值
  //kilometers值發生改變時，執行回調
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值為: " + oldVal + "，修改後值為: " + newVal;
  })
</script>

也可以在這裡綁定返回對象的計算屬性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:orange}
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="myclass">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      "pink":true,
      "blue":{
        value:true,
        type:"real"
      }
    },
    //計算屬性並返回對象
    computed:{
      myclass:function(){
        return {
          base:true,
          pink:this.pink && !this.blue.value,//粉色為true，藍色value為false，則顯示粉色
          blue:this.blue.value && this.blue.type==="real"//藍色value為true，且type為real，則顯示藍色
        }
      }
    }
  })

</script>

可以把一個數組傳給 v-bind:class

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:orange}
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="[baseCls,pinkCls,blueCls]">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      "baseCls":"base",
      "pinkCls":"pink",
      "blueCls":"blue"
    }
  })

</script>

使用三元表達式來切換列表中的 class ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="[baseCls,isPink?pinkCls:'']">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      "baseCls":"base",
      "pinkCls":"pink",
      "isPink":true
    }
  })

</script>

這段代碼表示顏色白色始終存在，當isPink為真時，背景顏色顯示粉色

可以在 v-bind:style 直接設置樣式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="{color:mycolor,fontSize:myfontSize,backgroundColor:mybg}">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      "mycolor":"#fff",
      "myfontSize":"16px",
      "mybg":"pink"
    }
  })

</script>

也可以直接綁定到一個樣式對象，讓模板更清晰

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="mystyle">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      mystyle:{
        "color":"#fff",
        "font-size":"16px",
        "background":"#abcdef"
      }
    }
  })

</script>

可以使用數組將多個樣式對象應用到一個元素上

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="[mystyle,mystyle2]">我是個框框</div>
</div>

<script>
  var vm=new Vue({
    el: '#demo',
    data: {
      mystyle: {
        "color": "#fff",
        "font-size": "16px",
        "background": "#abcdef"
      },
      mystyle2:{
        "font-weight":"bold"
      }
    }
  })

</script>

註意：當 v-bind:style 使用需要特定首碼的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的首碼

這個功能實在是太耐思了！！！

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Web_javascript-ECMAScript

javascript介紹 Web前端有三層： HTML：從語義的角度，描述頁面結構 CSS：從審美的角度，描述樣式（美化頁面） JavaScript：從交互的角度，描述行為（提升用戶體驗）其中JavaScript基礎又分為三個部分： ECMAScript：JavaScript的語法標準。包括變數、 ...
Web_HTML

web標準介紹 web標準： w3c：萬維網聯盟組織，用來制定web標準的機構（組織） web標準：製作網頁遵循的規範 web標準規範的分類：結構標準、表現標準、行為標準。結構：html。表示：css。行為：Javascript。總結說明：結構標準：相當於人的骨架。html就是用來製作網頁的。 ...
[css背景]背景顏色透明度

rgba與opacity 在第一個例子中，我們只讓背景顏色變得透明，而第二個例子用到opacity屬性，讓整個元素都變得透明，包含元素中含的內容。使用opacity把一個元素設置為透明後，將無法再讓其子元素變得不那麼透明。 body{ background-color: rgba(254,219, ...
element-ui純前端分頁

直接上代碼 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> <el-table-column type="selection">< ...
虛擬機與用友U8的安裝

1.如何安裝Vbox與U8 安裝包下載：鏈接: https://pan.baidu.com/s/1w8r7kyIJaT8ir dXwEe4tA 提取碼: 1888 裡面有個教程跟著教程一步一步來！！！全部下載雙擊安裝先解壓好之前下載的那個win7 64 001 點擊導入導入之前解壓出來的wi ...
帶你學習Javascript中的函數進階（一）

1. 函數的定義和調用 1.1 函數的定義方式 1. 函數聲明方式function關鍵字（命名函數） 1. 函數表達式（匿名函數） 1. new Function() Function裡面參數都必須是字元串格式第三種方式執行效率低，也不方便書寫，用的比較少所有函數都是Function的實例（對象 ...
Vue.js 表單

用 v-model 指令在表單控制項元素上創建雙向數據綁定 v-model 會根據控制項類型自動選取正確的方法來更新元素輸入框： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <styl ...
Vue.js 事件處理器

事件監聽可以使用 v-on 指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </s ...