第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

Z时代
2024-01-10
分类：综合

vue

 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>