Vue 动态绑定 class 的方法

深藏阁楼爱情的钟 2023-06-23 06:55 6阅读 0赞

> 本文实例讲述了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 烦恼过，本篇文章对大家有所帮助。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: https://img-blog.csdnimg.cn/20190512094840637.jpg