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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
vue组件入门知识全梳理
Sep 21 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
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php绘制一个矩形的方法
2015/01/24 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
JS实现吸顶特效
2020/01/08 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
领导欢送会主持词
2015/07/06 职场文书