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>

 

posted @ 2017-07-07 17:33  CodeProducter  阅读(2625)  评论(0)  编辑  收藏  举报