亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-11-27

1. 簡介

本小節我們將介紹 Vue 中如何動態綁定樣式。包括 Class 的綁定、內聯樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點難點。同學們可以在學完本小節之后對樣式的綁定方式加以總結，再通過反復的練習來加深印象。

2. 慕課解釋

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

通過 v-bind 指令給 DOM 元素動態綁定 Class 和 Style，一般用于根據不同數據狀態切換元素樣式的場景下。

2.綁定元素的 Class

我們可以通過數組和對象的兩種形式綁定元素的 Class。

2.1 對象

2.1.1 對象語法

通過傳給 v-bind:class 一個對象，以動態地切換 class：

<div v-bind:class="{ show: isShow }"></div>

代碼解釋：
上面的語法表示 show 這個 class 存在與否將取決于數據屬性 isShow 是否為真值。

具體示例：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<style>
  .hide {
    display: none;
  }
</style>
<body>
  <div id="app"> 
    <div v-bind:class="{hide: isHide}">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	isHide: true
  },
})
//vm.isHide = true
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 2 行，我們給 div 綁定樣式，當 isHide 為真值時， 其渲染結果為 <div class="hide"></div>，否則 <div></div>。
打開控制臺，修改 vm.isHide 的值可以動態改變頁面效果。

2.1.2 與普通的 class 屬性共存

此外，v-bind:class 指令也可以與普通的 class 屬性共存。
語法：<div class ="defaultClass" v-bind:class="{ classA: isA,classB:isB }">

當有如下模板:

<div
  class="defaultClass"
  v-bind:class="{ show: isShow, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isShow: true,
  hasError: false
}

結果渲染為：

<div class="defaultClass active"></div>

代碼解釋：
當 isShow 或者 hasError 變化時，class 列表將相應地更新。

例如，如果 hasError 的值為 true，isShow 的值為 true，class 列表將變為 "defaultClass show text-danger"。

例如，如果 hasError 的值為 true，isShow 的值為 false，class 列表將變為 "defaultClass text-danger"。

在之前介紹的案例中，我們將綁定的數據對象內聯定義在模板里， 這樣顯得比較繁瑣。其實，我們可以統一定義在一個 classObject 中：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div class="defaultClass" v-bind:class="classObject">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	classObject: {
      show: true,
      'text-danger': false
    }
  },
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

結果渲染為：

<div class="defaultClass show"></div>

代碼解釋：
HTML 代碼中，我們首先給 div 一個固定樣式 defaultClass， 然后通過 classObject 給 div 綁定樣式。
JS 代碼 第 6-9 行，我們定義了數據 classObject，它有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁面渲染的效果是：<div class="defaultClass show"></div>

2.1.3 利用計算屬性綁定樣式

<div v-bind:class="classObject"></div>

我們也可以在這里綁定一個返回對象的計算屬性。這是一個常用且強大的模式：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:class="classObject"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  computed: {
    classObject: function () {
      return {
        show: true,
        'text-danger': false
      }
    }
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

結果渲染為：

<div class="defaultClass show"></div>

代碼解釋：
HTML 代碼中，我們通過 classObject 給 div 綁定樣式。
JS 代碼 第 6-11 行，我們定義了計算屬性 classObject，它返回一個對象，該對象有兩個屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁面渲染的效果是：<div class="show"></div>

2.2 數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:class="[classA, classB]">Hello !</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	classA: 'classA',
    classB: 'classB1 classB2'
  },
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

渲染為：

<div class="classA classB1 classB2"></div>

代碼解釋：
在 HTML 代碼中，我們通過數組給 div 綁定樣式，數組中有 classA 和 classB 兩個值。
在 JS 代碼第 6-7 行定義了 classA 和 classB 兩個字符串，它的格式和元素 class 的格式相同，不同的樣式類之間以空格相隔。

如果你也想根據條件切換列表中的 class，可以用三元表達式：

<div v-bind:class="[isShow ? showClass : '', classB]"></div>

這樣寫將始終添加 classB 的樣式，但是只有在 isShow 為真時才添加 showClass。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象的形式來表達數組中的某一項：

<div v-bind:class="[{ showClass: isShow }, classB]"></div>

代碼解釋：
在 HTML 中，div 綁定一個樣式數組，數組第一項是一個對象表達式 { showClass: isShow }。當 isShow 為 true 時樣式最終綁定為：<div v-bind:class="[showClass, classB]"></div>；當 isShow 為 false 時樣式最終綁定為：<div v-bind:class="[classB]"></div>；

3. 綁定內聯樣式

和 Class 的綁定一樣，Style 的綁定同樣可以通過數組和對象的兩種形式。

3.1 對象語法

v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="{ backgroundColor: backgroundColor, width: width + 'px' }"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
    backgroundColor: 'red',
    width: 300
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

渲染為：

<div style =" background-color:red;width: 300px"></div>

代碼解釋：
在 HTML 代碼中，我們給 div 綁定 background-color 和 width 兩個內聯樣式，它們的值在 data 中定義。

在模板中寫較為復雜的表達式語法顯得比較繁瑣，通常直接綁定到一個樣式對象更好，這會讓模板顯得更加清晰：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="styleObject"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	styleObject: {
      "background-color": 'red',
      width: '300px'
    }
  },
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

渲染為：

<div style ="background-color:red;width: 300px"></div>

代碼解釋：
在 HTML 代碼中，我們給 div 綁定數據 styleObject，它們的值在 data 中定義。

3.2 數組語法

v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上：

實例演示
預覽 復制
復制成功！
<!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>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-bind:style="[stylesA, stylesB]"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
    stylesA: {
      "background-color": 'red',
      width: '300px'
    },
    stylesB: {
      color: '#fff',
      height: '300px'
    }
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

渲染為：

<div style ="background-color:red;width: 300px;color:#fff;height:300px"></div>

4. 小結

本小節我們學習了如何通過v-bind來動態綁定樣式。主要有以下知識點：

  • 通過 v-bind:class 動態綁定元素的 Class；
  • v-bind:style 動態綁定元素的內聯樣式；
  • 如果通過數組和對象的形式給 v-bind:class 和 v-bind:style 賦值。