Vue學習4：class與style綁定

時間 2019-11-08

標籤 vue 學習 class style 綁定简体版

原文原文鏈接

說明：有些部分我只是至關於作一個學習筆記，增強記憶之用。因此可能閱讀性不是那麼強。若是有參考我這類博客的人，那麼請見諒。css

代碼以下：html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue5</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <!--class與style是html元素的屬性，在vue中應該使用v-bind來設置樣式屬性-->
12 <!--vue.js的v-bind專門對此作了增強，表達式的結果除了字符串，還能夠是對象或者數組-->
13 <div id="app">
14     <!--這裏:class等價於v-bind="class",使用了縮寫-->
15     <!--第一部分-->
16     <!--1.爲:class設置一個對象，從而能夠切換class-->
17     <div :class="{classA:isClassA}">this will be orange</div>
18 
19     <!--2.咱們也能夠在對象中傳入更多的屬性來切換多個class-->
20     <!--hasError設置的樣式覆蓋了isClassA的字體顏色樣式-->
21     <div :class="{classA:isClassA, hasError:hasError}">this will be red</div>
22 
23     <!--3.咱們也能夠直接綁定數據裏的一個對象-->
24     <div :class="classObject">this will be same to the second</div>
25 
26     <!--4.咱們能夠綁定返回對象的計算屬性；比較經常使用且強大-->
27     <div :class="classObject1">this will be red</div>
28 
29     <!--5.咱們能夠爲:class設置一個數組-->
30     <div :class="[classB, classC]">this will be red</div>
31 
32     <!--6.使用三元表達式來切換class-->
33     <div :class="[classB, isClassC? classC :'']">this is red too</div>
34 
35     <br>
36     <!--第二部分-->
37     <!--:style能夠用來設置樣式-->
38     <div :style="{border:border,fontSize:fontSize+'px'}">this is style </div>
39     <br>
40     <!--:style綁定到樣式對象-->
41     <div :style="styleObject">this is style2</div>
42     <br>
43     <!--使用數組將多個樣式對象運用到一個元素上-->
44     <div :style="[style1,style2]">this is style3</div>
45 
46     <!--:style使用須要添加瀏覽器引擎前綴的css屬性時，如transform時，vue.js會自動偵測並添加相關前綴-->
47 </div>
48 
49 <style>
50     #app .classA, #app .isClassA1{
51         color: orange;
52     }
53     #app .hasError, #app .hasError1{
54         color: red;
55         font-size: 20px;
56     }
57 </style>
58 
59 <script>
60     var vm=new Vue({
61         el: '#app',
62         data:{
63             isClassA: true,
64             hasError: true,
65             classObject:{
66                 isClassA1: true,
67                 hasError1: true
68             },
69             classB: 'classA',
70             classC: 'hasError',
71             isClassC :true,
72 
73             border: '1px solid gold',
74             fontSize: 20,
75             styleObject:{
76                 color: 'orange',
77                 border: '1px solid black'
78             },
79             style1:{
80                 color:'silver'
81             },
82             style2:{
83                 border:'1px solid gold',
84                 fontSize: '20px'
85             }
86         },
87         computed:{
88             classObject1:function(){
89                 return {
90                     classA: this.isClassA && !this.hasError,
91                     hasError: this.hasError
92                 }
93             }
94         }
95     });
96 </script>
97 </body>
98 </html>

View Code

運行結果：vue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。