在前端開發中，設置元素的 class 列表和內聯樣式是基本要求。本文主要講解Vue開發中，樣式列表和內聯樣式的綁定，僅供學習分享使用，如果有不足之處，還請指正。 ...
在前端開發中，設置元素的 class 列表和內聯樣式是基本要求。本文主要講解Vue開發中，樣式列表和內聯樣式的綁定，僅供學習分享使用，如果有不足之處，還請指正。
概述
Vue操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字元串結果即可。不過，字元串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字元串之外，還可以是對象或數組。
綁定 HTML Class
可以傳給 v-bind:class 一個對象，以動態地切換 class：
1 <div v-bind:class="{red:isred,bold:isbold}">混合樣式1--綁定數據屬性</div>
上面的語法表示 red 這個 class 存在與否將取決於數據屬性 isred 的 是否為true。你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。
綁定的數據對象採用複合樣式的效果，不必內聯定義在模板里，如下所示：
1 <div v-bind:class="multi">混合樣式2---複合對象</div>
其中multi是一個複合數據對象，如下所示：
1 <script type="text/javascript"> 2 var vm=new Vue({ 3 el:"#app", 4 data:{ 5 bg:'yellow', 6 isbold:true, 7 isred:true, 8 multi:{ 9 red:true, 10 bold:true, 11 } 12 } 13 14 }); 15 </script>
以上兩種，結果渲染是一樣的，如下所示：
1 <div class="red bold"></div>
綁定計算屬性
我們也可以在這裡綁定一個返回對象的計算屬性。這是一個常用且強大的模式：
1 <div v-bind:class="cmpstyle">混合樣式3---計算屬性</div>
其中cmpstyle是一個計算屬性，返回的對象，如下所示：
1 <script type="text/javascript"> 2 var vm=new Vue({ 3 el:"#app", 4 computed:{ 5 cmpstyle:function(){ 6 return { 7 red:true, 8 bold:true, 9 } 10 } 11 } 12 }); 13 </script>
CSS數組語法
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
1 <div v-bind:class="arrcss">混合樣式4---數組綁定樣式</div>
其中arrcss是一個數組樣式，如下所示：
1 <script type="text/javascript"> 2 var vm=new Vue({ 3 el:"#app", 4 data:{ 5 arrcss:['red','bold'], 6 } 8 }); 9 </script>
綁定內聯樣式
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
1 <div v-bind:style="{color:bg2}">內聯樣式2--屬性</div>
綁定內聯樣式,直接綁定到一個樣式對象通常更好，這會讓模板更清晰：
1 <div v-bind:style="bg3">內聯樣式3--綁定對象</div>
其中，bg3是一個對象，如下所示：
1 <script type="text/javascript"> 2 var vm=new Vue({ 3 el:"#app", 4 data:{ 5 bg2:'green', 6 bg3:{ 7 color:'red', 8 fontSize:'30px' 9 } 10 } 11 }); 12 </script>
內聯樣式數組語法
v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上：
1 <div v-bind:style="[bg3,bg4]">內聯樣式4--綁定對象</div>
多重值
從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶首碼的值，例如：
1 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
這樣寫只會渲染數組中最後一個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器首碼的 flexbox，那麼就只會渲染 display: flex。
本示例中源碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>一起學Vue之綁定樣式</title> 6 <!-- 開發環境版本，包含了有幫助的命令行警告 --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 <style type="text/css"> 9 .red{ 10 color:red; 11 } 12 .yellow{ 13 color: goldenrod; 14 } 15 .green{ 16 color: green; 17 } 18 .bold{ 19 font:bolder; 20 font-style: oblique; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <div v-bind:class="bg"> 27 這是我的顏色 28 </div> 29 <!-- 30 作者：[email protected] 31 時間：2019-11-20 32 描述：Html樣式：可以傳給 v-bind:class 一個對象，以動態地切換 class： 33 上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 是否為true。 34 --> 35 <div v-bind:class="{red:isred,bold:isbold}">混合樣式1--綁定數據屬性</div> 36 <!-- 37 作者：[email protected] 38 時間：2019-11-20 39 描述：綁定的數據對象採用複合樣式的效果，不必內聯定義在模板里 40 --> 41 <div v-bind:class="multi">混合樣式2---複合對象</div> 42 <!-- 43 作者：[email protected] 44 時間：2019-11-20 45 描述：綁定計算屬性 46 --> 47 <div v-bind:class="cmpstyle">混合樣式3---計算屬性</div> 48 <!-- 49 作者：[email protected] 50 時間：2019-11-20 51 描述：數組綁定樣式 52 --> 53 54 <div v-bind:class="arrcss">混合樣式4---數組綁定樣式</div> 55 <!-- 56 作者：[email protected] 57 時間：2019-11-20 58 描述：綁定內聯樣式,直接綁定到一個樣式對象通常更好，這會讓模板更清晰： 59 --> 60 <div v-bind:style="{color:bg2}">內聯樣式2--屬性</div> 61 <div v-bind:style="bg3">內聯樣式3--綁定對象</div> 62 <!-- 63 作者：[email protected] 64 時間：2019-11-20 65 描述：也可以綁定數組 66 --> 67 <div v-bind:style="[bg3,bg4]">內聯樣式4--綁定對象</div> 68 </div> 69 <script type="text/javascript"> 70 var vm=new Vue({ 71 el:"#app", 72 data:{ 73 bg:'yellow', 74 isbold:true, 75 isred:true, 76 multi:{ 77 red:true, 78 bold:true, 79 }, 80 arrcss:['red','bold'], 81 bg2:'green', 82 bg3:{ 83 color:'red', 84 fontSize:'30px' 85 }, 86 bg4:{ 87 fontStyle:'italic' 88 } 89 }, 90 computed:{ 91 cmpstyle:function(){ 92 return { 93 red:true, 94 bold:true, 95 } 96 } 97 } 98 }); 99 </script> 100 </body> 101 </html>View Code
備註
不管見識高低，一個人深度整理和收拾自己的內心，這事本身就很迷人。我努力奔跑只為追上曾經被寄予厚望的自己！！！
