视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Vue.js中用v-bind绑定class的注意事项
2020-11-27 20:26:46 责编:小采
文档
前言

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

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

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

<!DOCTYPE html> 
<html> 
 
<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值,见下图:

看到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> 
 
<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>

总结

下载本文
显示全文
专题