1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 10 <style> 11 .red{ 12 color: red; 13 } 14 .thin{ 15 font-weight: 200; 16 } 17 .italic{ 18 font-style: italic; 19 } 20 .active{ 21 letter-spacing: 0.5em; 22 } 23 </style> 24 </head> 25 26 <body> 27 <div id="app"> 28 <!-- <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 29 30 <!-- 第一种使用方式，之间传递一个数组，注意：这里的class需要使用 v-bind 做数据绑定 --> 31 <!-- <h1 :class="['thin','italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 32 33 <!-- 在数组中使用三元表达式 --> 34 <!-- <h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 35 36 <!-- 在数组中使用对象来代替三元表达式，提高代码的可读性 --> 37 <!-- <h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的H1，大到你无法想象！！！</h1> --> 38 39 <!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以，这里我没写引号；属性的值 是一个标识符 --> 40 <h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个很大很大的H1，大到你无法想象！！！</h1> 41 42 <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1> 43 44 </div> 45 <script> 46 //创建 Vue 实例，得到 ViewModel 47 var vm = new Vue({ 48 el:'#app', 49 data:{ 50 flag:true, 51 classObj:{red:true,thin:true,italic:false,active:false} 52 }, 53 methods:{} 54 }); 55 </script> 56 </body> 57 </html>