LQ博客 www.lqblogs.com
arrows
nav

vue动态绑定class的几种方式

作者:LQ 来源:原创 发布时间:2020-07-31 浏览量:250 评论:0 点赞:1

vue动态绑定class的几种方式


对象方法:

1、简单绑定:(这里的active加不加单引号,都可以解析,不过最好还是加上,避免不必要的错误)

 绑定并判断一个

:class="{test: isTest}" 或者

:class="{'test': isTest}" 
:class="{'test': isTest== 1}"

 2、绑定并判断多个

:class="{'test': isTest, 'second': isSecond}"
:class="{'test': isTest, 'second': isSecond, 'third': isThird}" 或者

:class="classObject" 
    data() { return { classObject: { test: true, second: false } }} 又或者
    
:class="{'test': isTest== 1}"
    computed:{ classObject: () => { return {test: true, second: false }}


数组方法:

1、数组与三元运算符结合

:class="[isTest ? 'active' : ''] 或者

:class="[isTest ? 'active' : 'active1'] 或者

:class="[isTest == 1 ? 'active' : 'active1']

2、数组与对象结合

:class="[isTest ? 'active' : '', {'one': isOne} ] 或者

:class="[isTest ? 'active' : '', {'one': isOne}, {'second': isSecond} ]

3、数组、对象和静态class三种结合(数组里面用逗号分隔,多个静态的class用空格隔开)

:class="[isTest ? 'active' : '', {'one': isOne}, 'second'] 或者

:class="[isTest ? 'active' : '', {'one': isOne}, 'second third' ]


Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(1)
打赏
倒踩(1)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(250)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章