標籤：http document style idt div com blog false yellow
關於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時的注意事項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
