Vue.js中用v-bind绑定class的注意事项


Posted in Javascript onDecember 13, 2016

前言

在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强。表达式结果出了字符串之外,还可以是对象或者数组。

这里自己对其进行了测试,发现有一下的问题:

如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错。

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
 
 .class-a { 
 color: #FF0000; 
 } 
 
 .class-b { 
 text-decoration: underline; 
 } 
 </style> 
</head> 
 
<body> 
 <div id="app"> 
 <div v-bind:class="classObject"> 
 关于class的绑定 
 </div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 classObject: { 
 //'class-a',不能写成class-a(不带引号);这里的classObject是js对象,而class-b是代表的是一个样式,所以必须写成'class-a',用引号括起来。 
 //否则这里的class-a只能代表classObject的一个属性名称而已,这样vuejs在初始化时,会报错。 
 'class-a':false, 
 'class-b': true 
 } 
 } 
 }); 
 </script> 
</body> 
 
</html>

参考资料:

Vue.js官网----http://cn.vuejs.org/guide/class-and-style.html

补充:

在这里,自己感觉代码中的classObject有点像散列表,key是一个样式class,而value是boolean类型的值。

从console中获取和改变classObject对象中class-a值,见下图:

Vue.js中用v-bind绑定class的注意事项

看到console中操作,让我觉得对于classObject确实有点像散列表类型。为了证实这个,可以去看看源码(ps:自己没看)。

在Vue.js1.0.19,作者为其添加了一些语法,在数组也可以使用对象语法:

<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div>

<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>

上面,对于classA可以加引号和不加引号,下面是自己的测试代码。

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 
 
 .class-a { 
 color: #FF0000; 
 } 
 
 .classB { 
 text-decoration: underline; 
 } 
 
 .classC{ 
 text-shadow: 2px 2px 4px #000000; 
 } 
 </style> 
</head> 
 
<body> 
 <div id="app"> 
 <!-- 两种绑定:加引号和不加引号,都可以 --> 
 <div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div> 
 <div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 classA: 'class-a', 
 isB: true, 
 isC: true 
 } 
 
 }); 
 </script> 
</body> 
 
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 #Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
浅析Jquery操作select
Dec 13 #Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
银行求职信
2014/05/31 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL