本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下：
#1 字符串绑定
:class=" 'className' "
/* 如上示例是最简单的动态绑定，但好像没有任何意义，和不动态绑定的结果是一样的。 */#2 对象绑定
:class="{'className': 条件表达式 }"
/* 当 条件表达式 为true时，则绑定 */#3 三目运算符绑定
:class=" 条件表达式 ? 'className1' : 'className2' "
/* 当 条件表达式 为 true 时绑定 'className1' 否则 绑定 'className2' */#4 数组绑定
在实际的开发中，绑定的class会更多，这时候需要多种方式混合绑定
:class=" [ {'className1': 条件表达式1 } , (条件表达式2 ? 'className2':'className3') ] "
/* 如果有多个 类名 需要绑定且判断条件各不相同时，则需要使用混合方式，通过 数组中包含多个项来处理 */如果仅是上示例的需求，也可以写成如下（对象多个属性）方式：
:class=" {'className1': 条件表达式1 , 'className2': 条件表达式2 , 'className3': !条件表达式2} "
/* 相比较而言，用混合模式会相对精简 */#5 计算属性/函数绑定
/* 计算属性绑定 */
:class="计算属性名"
/* 函数绑定 */
:class="方法名()"
在 计算属性 与 函数 中 return 正确的 class 字符串即可Vue.js 的动态绑定 class 的方式基本是以上几种，vue 还有一种更强大的处理就是如是你的class真的超多的话，可以绑定一个对象或者一个数组，以减少在 DOM 结构中写入过长的属性影响可读性及美观性。
举一反三，绑定多个 style 值也是如此的。本篇文章就不再叙述。相信有不少的读者也为绑定多个不同判断条件的 class 烦恼过，本篇文章对大家有所帮助。
作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]
公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
