【Vue.js】vue基础： 3种Class和Style绑定语法

凡是用到了v-bind，那就一定有变量的存在，下面是三种语法的展示:

1. 对象语法:

v-bind:class="{active: isActive, 'text-danger': hasError}"

// 这里的active是在class的名称，isActive是变量

 

2. 数组语法

<div v-bind:class="[activeClassA, activeClassB]">

data () {
    activeClassA: 'active',
    activeClassB: 'text-danger'
}

 

3. style绑定-对象语法

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

值得注意的是，上面第一种方法是class名称与变量的值进行绑定，
而这里的第三中方法是直接对class里面的style属性与变量进行作用，这里的activeColor与fontSize都为变量