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函数
Apr 09 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
微信小程序 教程之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过滤危险html代码的函数
2008/07/22 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python并发编程之线程实例解析
2017/12/27 Python
Python匿名函数及应用示例
2019/04/09 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
质量保证书范本
2014/04/29 职场文书
员工薪酬激励方案
2014/06/13 职场文书
初一年级组工作总结
2015/08/12 职场文书
决心书格式及范文
2019/06/24 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers