Vue.js绑定HTML class数组语法错误的原因分析


Posted in Javascript onOctober 19, 2016

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数组语法错误,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
详解JavaScript的while循环的使用
Jun 03 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 #Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 #Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 #Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 #Javascript
使用Angular.js开发的注意事项
Oct 19 #Javascript
js表单登陆验证示例
Oct 19 #Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 #Javascript
You might like
php 代码优化之经典示例
2011/03/24 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
JavaScript实现简单验证码
2020/08/24 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
python中property和setter装饰器用法
2019/12/19 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
给民警的表扬信
2014/01/08 职场文书
专业技术职务聘任书
2014/03/29 职场文书
高考寄语大全
2014/04/08 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
小学生节水倡议书
2015/04/29 职场文书
社区服务理念口号
2015/12/25 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
java多态注意项小结
2021/10/16 Java/Android