vue 中使用class(樣式)


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9     <!-- 使用class樣式: 10  1、數組 直接傳遞一個數組,注意:這里的class需要使用 v-moddel 做數據綁定 11  2、數組中使用三元表達式 12  3、數組中嵌套對象 在數組中 使用對象替代三元表達式,提高代碼可讀性 13  4、直接使用對象 14     -->
15 </head>
16 <style>
17 .red{
18  color: red;
19 }
20 .thin{
21  font-weight: 200;
22 }
23 .italic{
24  font-style: italic;
25 }
26 .active{
27  letter-spacing: 0.5em;  /*//中文字間距 */
28 }
29 </style>
30 <body>
31     <div id="app">
32         <!-- 第一種:數組 直接傳遞一個數組,注意:這里的class需要使用 v-moddel 做數據綁定 -->
33         <h1 :class="['red', 'thin']">第一種:數組 了解</h1>
34         <!-- 第二種:數組中使用三元表達式 -->
35         <h1 :class="['red', flag? 'active':'']">第二種:數組中使用三元表達式</h1>
36         <!-- 第三種:數組中嵌套對象 在數組中 使用對象替代三元表達式,提高代碼可讀性-->
37         <h1 :class="['red', 'italic', {'active' : flag}]">第三種:數組中嵌套對象</h1>
38         <!-- 第四種:直接使用對象 在為class 使用 V-bind 綁定對象的時候,對象的屬性是類名, 39  由於對象屬性可帶引號也可不帶引號,所以這里沒有寫引號;屬性的值 是一個標識符 -->
40         <!-- <h1 :class="{red:true, thin:true, italic:true, active:false}">第四種:直接使用對象</h1> -->
41         <h1 :class="classObj">第四種:直接使用對象</h1>
42 
43         <!-- <h1 class="red thin">this is a letter</h1> -->
44         
45     </div>
46     <script>
47        //創建Vue實例 得到ViewModel
48        var vm = new Vue({ 49  el:"#app", 50  data:{ 51  flag: true,//第二種:數組中使用三元表達式/第三種:數組中嵌套對象
52  classObj: {red:true, thin:true, italic:true, active:false}, 53  }, 54  methods:{} 55  }) 56     </script>
57 </body>
58 </html>

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM