在前端開發中，設定元素的 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
備注
不管見識高低，一個人深度整理和收拾自己的內心，這事本身就很迷人，我努力奔跑只為追上曾經被寄予厚望的自己！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/161545.html
標籤：JavaScript
上一篇：滾輪滾動事件