Vue學習之路第十一篇：為頁面元素設置class類樣式
阿新 • • 發佈：2019-01-29
成了 簡化 htm viewport con ava 屬性綁定 進行 頁面元素
1、class為頁面元素的一個屬性，通過前面第五篇的內容可知，操作屬性需要使用到v-bind指定（也可簡寫為 :）。
2、先來看一個簡單的頁面樣式內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue樣式</title> <script type="text/javascript" src="js/vue.min.js"></script> <style type="text/css"> .red{ color: red; } .thin{ font-weight: bold; } .size{ font-size: 30px; }</style> </head> <body> <div id="app"> <p class="red size">這是Vue樣式示例</p> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{}, methods:{} }) </script> </body> </html>
裏面簡單的定義了三個樣式類：red、thin、size；接下來我們通過v-bind實現同樣的效果。
<p v-bind:class="redStr">這是Vue樣式示例</p>
p標簽裏我們添加v-bind指令，class裏的樣式內容為Vue對象裏data屬性定義的“redStr”值。
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
redStr:‘red size‘
},
methods:{}
})
</script>
data裏redStr的值為“red size”，所以運行效果是一樣的。
3、看下個例子：
<body>
<div id="app">
<p v-bind:class="[‘red‘,flag?‘size‘:‘‘]">這是Vue樣式示例</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
flag:true
},
methods:{}
})
</script>
</body>
這裏我感覺雖然用了v-bind指令，但是其沒有從data裏取數據，其直接把樣式定義成了一個固定字符串數組，通過數組內容取對應的樣式。其有一個特點就是可以讀取三元表達式，根據三元表達式來控制樣式是否進行展示。而且我們還可以對這個三元表達式進行簡化，用對象的方式來達到同樣的效果。代碼如下：
<p v-bind:class="[‘red‘,{‘size‘:flag}]">這是Vue樣式示例</p>
4、下個例子：
<body>
<div id="app">
<p v-bind:class="classObj">這是Vue樣式示例</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
classObj:{‘size‘:true,‘red‘:true,‘thin‘:true}
},
methods:{}
})
</script>
</body>
這裏通過屬性綁定了data對象數據classObj，其值為一個對象，通過true或者false來決定是否應用該樣式，這樣的代碼比較簡潔而且靈活度比較高。
5、以上幾種方式都可以用來定義class樣式，具體使用哪一種可以根據具體需求場景來應用。
每天進步一點點！
Vue學習之路第十一篇：為頁面元素設置class類樣式