Vue使用 v-bind 绑定 class

有时候class类要根据数据的不同来切换样式，可以使用v-bind绑定class，class类可以是对象，也可以是数组。

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

有时候时间久了容易忘，这里记下之前常用的几个v-bind绑定class的用法。

• 下面的写法，可以根据 flag是 true 或 false ，来切换 span 是否启用 active 类，

<span v-bind:class="{ active: flag}"></span>

• v-bind 绑定的类，可以和原始类一起写，也可以写多个类，绑定的类 如果有 "-" 号，要用单引号包裹起来，避免歧义

<span class="btn"
  v-bind:class="{ 'btn-success': success, 'btn-warning': warning }">
</span>

• v-bind也可以直接绑定一个对象，在data中修改对象的值

<span class="btn" v-bind:class="btnClass"></span>
<script>
    ...
    data:{
        btnClass:{
            'btn-success': true,
            'btn-warning': false
        }
    }
    ...
</script>

• v-bind绑定的也可以是一个数组

<span class="btn" v-bind:class="[success, warning]"></span>
<script>
    ...
    data:{
        success: 'btn-success',
        warning: 'btn-warning'
    }
    ...
</script>

• 数组内也可以绑定一个三元表达式，有时候需要根据一个值在两个样式之间切换的时候，比较常用，当success 为真时，就会是'btn-success'类样式，反之为'btn-warning'样式

<span class="btn" v-bind:class="[success ? 'btn-success' : 'btn-warning']"></span>
<script>
    ...
    data:{
        success: true
    }
    ...
</script>

还有其他的一些绑定用法，这里列了几个我比较常用的，大家也可以去 Vue官网 了解更多好玩有用的知识哦~

(●'◡'●)