Vue.js绑定HTML class数组语法错误的原因分析
2016-10-19 16:09
1161 查看
Vue.js绑定HTML class数组语法错误,详情如下所示:
昨天在官网教程上发现一个错误是这样的,下面看图
http://cn.vuejs.org/guide/class-and-style.html
当有多个条件class时这样写有些繁琐。在1.0.19+中,可以在数组语法中使用对象语法:
如果这样写是可以执行成功的,但有错误
data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC: false } <div :class="[classA, { classB: isB, classC: isC }]">
渲染为:
<div class="class-a classB">
如果是短横符这样的 class-b 是不成功的,所以这里还是要用标准的对象语法加上引号
<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">
渲染为:
<div class="class-a class-b">
以上所述是小编给大家介绍的Vue.js绑定HTML class数组语法错误,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)
- Class 与 Style 绑定HTML Class(vue.js)
- A TextureView or a subclass can only be used with hardware acceleration enabled.错误原因分析
- Vue.js 动态绑定class
- Vue.js学习 Item6 -- Class 与 样式绑定
- 详解Vue.js动态绑定class
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
- Vue.js-----轻量高效的MVVM框架(六、Class与Style绑定)
- Vue.js使用v-bind绑定class时的注意事项
- vue.js-动态绑定class
- 详解Vue.js动态绑定class
- vue.js数据绑定语法
- Vue.js学习笔记: 数据绑定语法---绑定表达式
- Vue.js每天必学之Class与样式绑定
- vue.js学习笔记之绑定style样式和class列表
- JSP引入JS文件路径错误原因分析
- Vue.js数据绑定语法
- Class 与 Style 绑定内联样式(vue.js)
- vue.js绑定class和style样式(6)
- Vue.js Class与Style绑定