1.Class繫結

在Vue中，如果要為這樣的一個div的class屬性進行動態賦值

<div class="active text-danger">class1</div>

可以使用v-bind，一般有以下三種寫法：

<div v-bind:class="{ 'active': isActive, 'text-danger':hasError}">class1</div>
//data()部分
return{
  isActive: true,
  hasError: true   //如果設定為false，則text-danger屬性不可見
 

}

<div v-bind:class="classObject">class2</div>
//data()部分
classObject:{
    'active': true,    //如果設定為false，則active屬性不可見
    'text-danger':true
}

<div v-bind:class="[activeClass, errorClass]">class3</div>
//data()部分
classObject:{
    activeClass:'active',
    errorClass:'text-danger'
 

}

“v-bind:”可以直接簡寫成”:”，則上述程式碼可以寫成下面的樣子

<div :class="{ 'active': isActive, 'text-danger':hasError}">class1</div>
<div :class="classObject">class2</div>
<div :class="[activeClass, errorClass]">class3</div>

瀏覽器展示結果如下：

2.style繫結

與class的繫結一樣，style的繫結也有下面三種寫法

<div :style="{ color: activeColor, fontSize: fontSize}"
 
>style1</div>
<div :style="styleObject">style2</div>
<div :style="[baseStyles, overridngStyles]">style3</div>

data部分可以寫成這樣

activeColor: 'red',
fontSize: '20px',
styleObject:{
  'color': 'red',
  'fontSize': '20px'
},
baseStyles:{
  'color': 'red'
},
overridngStyles:{
  'fontSize': '20px'
}

瀏覽器展示結果如下：