当前第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+iview框架实现左侧动态菜单功能的示例
vue是做什么的
vue路由守卫有哪三种类型
深入研究vue cli3
vue.js怎样引入到html中
vue中iview是什么？
15道vue常见面试题解析
angular脏值检测与vue数据劫持的区别是什么
详解vue中的无渲染行为插槽
vue watch用法是什么
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » vue如何动态绑定class？方法介绍
