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>