Vue動(dòng)態(tài)樣式綁定實(shí)例詳解

更新時(shí)間：2023年04月07日 08:42:24 作者：很酷的站長(zhǎng)

眾所周知vue是操作dom元素的,那么如果有元素要?jiǎng)討B(tài)綁定樣式,這種需求,還是要通過改變數(shù)據(jù)來(lái)改變視圖的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式綁定的相關(guān)資料,需要的朋友可以參考下

1. 簡(jiǎn)介

本小節(jié)我們將介紹 Vue 中如何動(dòng)態(tài)綁定樣式。包括 Class 的綁定、內(nèi)聯(lián)樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點(diǎn)難點(diǎn)。同學(xué)們可以在學(xué)完本小節(jié)之后對(duì)樣式的綁定方式加以總結(jié)，再通過反復(fù)的練習(xí)來(lái)加深印象。

2. 解釋

操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見需求。因?yàn)樗鼈兌际菍傩裕晕覀兛梢杂?v-bind 處理它們：只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可。不過，字符串拼接麻煩且易錯(cuò)。因此，在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組。 ---- 官方定義

通過 v-bind 指令給 DOM 元素動(dòng)態(tài)綁定 Class 和 Style，一般用于根據(jù)不同數(shù)據(jù)狀態(tài)切換元素樣式的場(chǎng)景下。

3.綁定元素的 Class

我們可以通過數(shù)組和對(duì)象的兩種形式綁定元素的 Class。

3.1 對(duì)象

3.1.1 對(duì)象語(yǔ)法

通過傳給 v-bind:class 一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：

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

代碼解釋：

上面的語(yǔ)法表示 show 這個(gè) class 存在與否將取決于數(shù)據(jù)屬性 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 綁定來(lái)樣式，當(dāng) isHide 為真值時(shí)，其渲染結(jié)果為 <div class="hide"></div>，否則 <div></div>。
打開控制臺(tái)，修改 vm.isHide 的值可以動(dòng)態(tài)改變頁(yè)面效果。

3.1.2 與普通的 class 屬性共存

此外，v-bind:class 指令也可以與普通的 class 屬性共存。

語(yǔ)法：<div class ="defaultClass" v-bind:class="{ classA: isA,classB:isB }">

當(dāng)有如下模板:

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

和如下 data：

data: {
  isShow: true,
  hasError: false
}

結(jié)果渲染為：

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

代碼解釋：

當(dāng) isShow 或者 hasError 變化時(shí)，class 列表將相應(yīng)地更新。

例如，如果 hasError 的值為 true，isShow 的值為 true，class 列表將變?yōu)?nbsp;"defaultClass show text-danger"。

例如，如果 hasError 的值為 true，isShow 的值為 false，class 列表將變?yōu)?nbsp;"defaultClass text-danger"。

在之前介紹的案例中，我們將綁定的數(shù)據(jù)對(duì)象內(nèi)聯(lián)定義在模板里，這樣顯得比較繁瑣。其實(shí)，我們可以統(tǒng)一定義在一個(gè)c lassObject 中：

<!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>

結(jié)果渲染為：

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

代碼解釋：

HTML 代碼中，我們首先給 div 一個(gè)固定樣式 defaultClass，然后通過 classObject 給 div 綁定樣式。

JS 代碼第 6-9 行，我們定義了數(shù)據(jù) classObject，它有兩個(gè)屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁(yè)面渲染的效果是：<div class="defaultClass show"></div>

3.1.3 利用計(jì)算屬性綁定樣式

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

我們也可以在這里綁定一個(gè)返回對(duì)象的計(jì)算屬性。這是一個(gè)常用且強(qiáng)大的模式：

<!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>

結(jié)果渲染為：

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

代碼解釋：

HTML 代碼中，我們通過 classObject 給 div 綁定樣式。

JS 代碼第 6-11 行，我們定義了計(jì)算屬性 classObject，它返回一個(gè)對(duì)象，該對(duì)象有兩個(gè)屬性：1. 屬性 show，值為 true，2. 屬性 text-danger，值為 false。所以，最后頁(yè)面渲染的效果是：<div class="show"></div>

3.2 數(shù)組語(yǔ)法

我們可以把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) 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 代碼中，我們通過數(shù)組給 div 綁定樣式，數(shù)組中有 classA 和 classB 兩個(gè)值。

在 JS 代碼第 6-7 行定義了 classA 和 classB 兩個(gè)字符串，它的格式和元素 class 的格式相同，不同的樣式類之間以空格相隔。

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

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

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

不過，當(dāng)有多個(gè)條件 class 時(shí)這樣寫有些繁瑣。所以在數(shù)組語(yǔ)法中也可以使用對(duì)象的形式來(lái)表達(dá)數(shù)組中的某一項(xiàng)：

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

代碼解釋：

在 HTML 中，div 綁定一個(gè)樣式數(shù)組，數(shù)組第一項(xiàng)是一個(gè)對(duì)象表達(dá)式 { showClass: isShow }。當(dāng) isShow 為 true 時(shí)樣式最終綁定為：<div v-bind:class="[showClass, classB]"></div>；當(dāng) isShow 為 false 時(shí)樣式最終綁定為：<div v-bind:class="[classB]"></div>；

4.綁定內(nèi)聯(lián)樣式

和 Class 的綁定一樣，Style 的綁定同樣可以通過數(shù)組和對(duì)象的兩種形式。

4.1 對(duì)象語(yǔ)法

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

<!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 兩個(gè)內(nèi)聯(lián)樣式，它們的值在 data 中定義。

在模板中寫較為復(fù)雜的表達(dá)式語(yǔ)法顯得比較繁瑣，通常直接綁定到一個(gè)樣式對(duì)象更好，這會(huì)讓模板顯得更加清晰：

<!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 綁定數(shù)據(jù) styleObject，它們的值在 data 中定義。

4.2 數(shù)組語(yǔ)法

v-bind:style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上：

<!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>

5. 小節(jié)

本小節(jié)我們學(xué)習(xí)了如何通過v-bind來(lái)動(dòng)態(tài)綁定樣式。主要有以下知識(shí)點(diǎn)：

通過 v-bind:class 動(dòng)態(tài)綁定元素的 Class；v-bind:style 動(dòng)態(tài)綁定元素的內(nèi)聯(lián)樣式；如果通過數(shù)組和對(duì)象的形式給 v-bind:class 和 v-bind:style 賦值。

到此這篇關(guān)于Vue動(dòng)態(tài)樣式綁定的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)樣式綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫(kù)

CMS

常用工具

Vue動(dòng)態(tài)樣式綁定實(shí)例詳解

目錄

1. 簡(jiǎn)介

2. 解釋

3.綁定元素的 Class

3.1 對(duì)象

3.1.1 對(duì)象語(yǔ)法

3.1.2 與普通的 class 屬性共存

3.1.3 利用計(jì)算屬性綁定樣式

3.2 數(shù)組語(yǔ)法

4.綁定內(nèi)聯(lián)樣式

4.1 對(duì)象語(yǔ)法

4.2 數(shù)組語(yǔ)法

5. 小節(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具