vuejs中v-bind綁定class時的注意事項

本文轉載自查看原文 2017-07-07 17:33 2302 vuejs

關於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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VueJS樣式綁定v-bind:class v-bind 及 class 與 style 綁定 VueJS綁定縮寫：可省略v-on、v-bind VueJS樣式綁定之內聯樣式v-bind:style Vuejs之v-bind介紹 v-bind動態綁定class和style vue 綁定添加class 屬性 4種方法添加style 3中方法 v-bind /： Vue 中動態添加class（使用v-bind:class） vue中v-bind:class動態添加class 雙向綁定v-bind