Vue 动态绑定 class 的方法-蒲公英云

Vue 动态绑定 class 的方法

本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下：

:class=" 'className' "
/* 如上示例是最简单的动态绑定，但好像没有任何意义，和不动态绑定的结果是一样的。 */

:class="{'className': 条件表达式 }"
/* 当 条件表达式 为true时，则绑定 */

:class=" 条件表达式 ? 'className1' : 'className2' "
/* 当 条件表达式 为 true 时绑定 'className1' 否则 绑定 'className2' */

在实际的开发中，绑定的class会更多，这时候需要多种方式混合绑定

:class=" [ {'className1': 条件表达式1 } , (条件表达式2 ? 'className2':'className3') ] "
/* 如果有多个 类名 需要绑定且判断条件各不相同时，则需要使用混合方式，通过 数组中包含多个项来处理 */

如果仅是上示例的需求，也可以写成如下（对象多个属性）方式：

:class=" {'className1': 条件表达式1 , 'className2': 条件表达式2 , 'className3': !条件表达式2} "
/* 相比较而言，用混合模式会相对精简 */

/* 计算属性绑定 */
:class="计算属性名"
/* 函数绑定 */
:class="方法名()"
在 计算属性 与 函数 中 return 正确的 class 字符串即可

Vue.js 的动态绑定 class 的方式基本是以上几种，vue 还有一种更强大的处理就是如是你的class真的超多的话，可以绑定一个对象或者一个数组，以减少在 DOM 结构中写入过长的属性影响可读性及美观性。

举一反三，绑定多个 style 值也是如此的。本篇文章就不再叙述。相信有不少的读者也为绑定多个不同判断条件的 class 烦恼过，本篇文章对大家有所帮助。

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

Vue 动态绑定 class 的方法