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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
原生js实现随机点餐效果
Dec 10 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作的文本留言本的例子(三)
2006/10/09 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php生成与读取excel文件
2016/10/14 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python AES加密实例解析
2018/01/18 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python可视化text()函数使用详解
2020/02/11 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
小结Python的反射机制
2020/09/28 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
个人委托书范本
2014/04/02 职场文书
校长四风对照检查材料
2014/09/27 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
关于五一放假的通知
2015/08/18 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript