当前第2页 返回上一页
1 | <div :class="[classA, classB]">Demo6</div>
|
Javascript代码：
1 2 3 4 | data: {
classA: 'class-a',
classB: 'class-b'
}
|
渲染后的HTML:
1 | <div class="class-a class-b">Demo6</div>
|
数组中可以包含object类型，数组中的object对象改变，也会更新class列表
HTML代码：
1 | <div :class="[classA, classB]">Demo7</div>
|
Javascript代码：
1 2 3 4 5 6 7 8 | data: {
classA: 'class-a',
objectClass: {
classB: 'class-b',
classC: false,
classD: true
}
}
|
渲染后的HTML:
1 | <div class="class-a class-b classD">Demo7</div>
|
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程教学！！
以上就是vue如何动态绑定class？方法介绍的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
vue mixins是什么
什么是 vue
2021年值得收藏的17个vue 后台管理模板
怎么用vue.js做异步请求
4个很 nice 的vue router过渡动效，快来收藏！
vue.js支持ie9吗
vue全家桶有哪些
vue脚手架如何导入jquery第三方插件
vue中v-if和v-show的区别是什么？
vue界面刷新不显示怎么办
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » vue如何动态绑定class？方法介绍
