一塊兒學Vue之樣式綁定

時間 2019-12-19

標籤一塊兒 vue 樣式綁定简体版

原文原文鏈接

在前端開發中，設置元素的 class 列表和內聯樣式是基本要求。本文主要講解Vue開發中，樣式列表和內聯樣式的綁定，僅供學習分享使用，若是有不足之處，還請指正。javascript

概述

Vue操做元素的 class 列表和內聯樣式是數據綁定的一個常見需求。由於它們都是屬性，因此咱們能夠用 v-bind 處理它們：只須要經過表達式計算出字符串結果便可。不過，字符串拼接麻煩且易錯。所以，在將 v-bind 用於 class 和 style 時，Vue.js 作了專門的加強。表達式結果的類型除了字符串以外，還能夠是對象或數組。css

綁定 HTML Class

能夠傳給 v-bind:class 一個對象，以動態地切換 class：html

1 <div v-bind:class="{red:isred,bold:isbold}">混合樣式1--綁定數據屬性</div>

上面的語法表示 red 這個 class 存在與否將取決於數據屬性 isred 的是否爲true。你能夠在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也能夠與普通的 class 屬性共存。前端

綁定的數據對象採用複合樣式的效果，沒必要內聯定義在模板裏，以下所示：vue

1 <div v-bind:class="multi">混合樣式2---複合對象</div>

其中multi是一個複合數據對象，以下所示：java

 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>

以上兩種，結果渲染是同樣的，以下所示：web

1 <div class="red bold"></div>

綁定計算屬性

咱們也能夠在這裏綁定一個返回對象的計算屬性。這是一個經常使用且強大的模式：npm

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                 做者：Alan.hsiang@qq.com
 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                 做者：Alan.hsiang@qq.com
 38                 時間：2019-11-20
 39                 描述：綁定的數據對象採用複合樣式的效果，沒必要內聯定義在模板裏
 40             -->
 41             <div v-bind:class="multi">混合樣式2---複合對象</div>
 42             <!--
 43                 做者：Alan.hsiang@qq.com
 44                 時間：2019-11-20
 45                 描述：綁定計算屬性
 46             -->
 47             <div v-bind:class="cmpstyle">混合樣式3---計算屬性</div>
 48             <!--
 49                 做者：Alan.hsiang@qq.com
 50                 時間：2019-11-20
 51                 描述：數組綁定樣式
 52             -->
 53             
 54             <div v-bind:class="arrcss">混合樣式4---數組綁定樣式</div>
 55             <!--
 56                 做者：Alan.hsiang@qq.com
 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                   做者：Alan.hsiang@qq.com
 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>