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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
Vue组件开发初探
Feb 14 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
JS实现网页时钟特效
Mar 25 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中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
全面理解Python中self的用法
2016/06/04 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
详解python读取和输出到txt
2019/03/29 Python
基于python操作ES实例详解
2019/11/16 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python中id函数运行方式
2020/07/03 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
毕业自我评价
2014/02/05 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
校长师德表现自我评价
2015/03/04 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL