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

时间:2022-07-05 17:15:27

凡是用到了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都为变量