vuejs中v-bind绑定class时的注意事项
Posted To be better
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs中v-bind绑定class时的注意事项相关的知识，希望对你有一定的参考价值。
关于v-bind绑定class的实例
作用：可用于不同样式之间的切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="https://unpkg.com/vue"></script> 7 <style> 8 .static { 9 font-size: 120px; 10 width: 600px; 11 margin: 0 auto; 12 background-color: yellow; 13 height: 120px; 14 line-height: 120px; 15 text-align: center; 16 } 17 18 .class-a { 19 color: #FF0000; 20 } 21 22 .class-b { 23 text-decoration: underline; 24 } 25 </style> 26 </head> 27 28 <body> 29 <div id="app"> 30 <div v-bind:class="classObject"> 31 关于class的绑定 32 </div> 33 </div> 34 <script> 35 var vm = new Vue({ 36 el: ‘#app‘, 37 data: { 38 classObject: { 39 //‘class-a‘,不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成‘class-a‘,用引号括起来。 40 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。 41 ‘class-a‘:true, 42 ‘class-b‘: false 43 } 44 } 45 }); 46 </script> 47 </body> 48 49 </html>
以上是关于vuejs中v-bind绑定class时的注意事项的主要内容，如果未能解决你的问题，请参考以下文章
我们可以直接在 vuejs 中绑定值吗，例如 v-bind:value="'India'"