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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
js实现日历的简单算法
2017/01/24 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python字典序问题实例
2014/09/26 Python
python中的随机函数小结
2018/01/27 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python 去除字符串中指定字符串
2020/03/05 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
新员工欢迎词
2014/01/12 职场文书
物流业务员岗位职责
2014/02/08 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android