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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
javascript冒泡排序小结
Apr 10 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
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
PHP mysql事务问题实例分析
2016/01/18 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
《李广射虎》教学反思
2014/04/27 职场文书
工伤事故证明
2014/10/20 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
孝女彩金观后感
2015/06/10 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Spring Boot 实现 WebSocket
2022/04/30 Java/Android