Vue的v-bind及class与style的绑定

---

一、绑定class的几种方式

1.对象语法（使用v-bind）

1. 给v-bind设置一个对象，可以动态的绑定class

<div v-bind:class="{'active':isActive}">div</div>
-----------------------------------------------------
data: {
      isActive: true,
    }
//此时div的class为active，因为isActive设置了true。通过设置boolean值来确定class是否应用

2. v-bind:class可以和普通的class共存

 <div class="container" :class="{'error':Error,'test':Test}"></div>

3. v-bind:class也可以绑定计算属性（重要）

 <div :class="classes"></div>
 -------------------------------
  computed: {
      classes: function () {
        	return {active: true, textFail: true };
        	//返回一个对象，其实就是对象语法
        }
    }
    //此时class为：active，textFail

2.数组语法（使用v-bind）

1. 当需要绑定多个class的时候，可以给v-bind设置一个数组

 <div :class="[activeCla,errorCla]"></div>
 //数组里写变量则class为变量的值，写字符串则class为字符串(写字符串似乎多此一举)
 ------------------------------------------
  data: {
      activeCla: 'active',
      errorCla: 'error',
    }
//此时class为：active，error

2. v-bind使用三元运算符绑定class

<div :class="[isActive?activeCla:'',errorCla]"></div>
-----------------------------------------------
data: {
      isActive: true,
      activeCla: 'active',
      errorCla: 'error',
    }

3. 数组中使用对象语法

<div :class="[{'active':isActive},error]"></div>

二、绑定内联样式

1. 直接绑定(了解)

 <div :style="{'color':color}">test text</div>
 ---------------------------------------------
  data: {
      color: 'red',
    }

2. 使用计算属性或者data

<div :style="sty">文本</div>
----------------------------
data: {
      sty: {
        color: 'red',
        fontSize: '30px'
      }
    }