当前第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中elementui是什么
在vue中destroy是什么意思？
vue+iview框架实现左侧动态菜单功能的示例
浅谈vue项目中使用npm安装bootstrap和jquery
在vue中怎么定义自定义组件
vue中如何正确强制组件重新渲染？（方法介绍）
使用vue脚手架怎么搭建项目
vue项目怎么嵌入jsp页面？（方法介绍）
怎样在vue中使用jquery
vue.use中发生了什么
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » vue如何动态绑定class？方法介绍
