Vue样式绑定如何实现长尾词的动态应用？

本文共计799个文字，预计阅读时间需要4分钟。

学习Vue的过程中觉得样式绑定很简单，但实际使用时总容易搞砸。因为class和style里的数组语法以及对象语法和data里绑定的值不太一样。这篇文简单对Vue绑定做一个总结：

学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的。这篇文章就简单对 Vue 绑定做个总结。

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

• Class绑定
• Style绑定

绑定Class

对象语法

data 里的属性是负责 toggle 是否要这个 class，也就是一般定义 Boolean 类型的值。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

这里用 isActive 和 hasError 定义是否需要 active 和 text-danger 类。