Vue動態(tài)樣式綁定實例詳解

更新時間：2023年04月07日 08:42:24 作者：很酷的站長

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

1. 簡介

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

2. 解釋

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

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

3.綁定元素的 Class

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

3.1 對象

3.1.1 對象語法

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

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

代碼解釋：

上面的語法表示 show 這個 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 綁定來樣式，當 isHide 為真值時，其渲染結(jié)果為 <div class="hide"></div>，否則 <div></div>。
打開控制臺，修改 vm.isHide 的值可以動態(tài)改變頁面效果。

3.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
}

結(jié)果渲染為：

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

代碼解釋：

當 isShow 或者 hasError 變化時，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ù)對象內(nèi)聯(lián)定義在模板里，這樣顯得比較繁瑣。其實，我們可以統(tǒng)一定義在一個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 一個固定樣式 defaultClass，然后通過 classObject 給 div 綁定樣式。

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

3.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>

結(jié)果渲染為：

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

代碼解釋：

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

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

3.2 數(shù)組語法

我們可以把一個數(shù)組傳給 v-bind:class，以應(yīng)用一個 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 兩個值。

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

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

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

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

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

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

代碼解釋：

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

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

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

4.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 兩個內(nèi)聯(lián)樣式，它們的值在 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 綁定數(shù)據(jù) styleObject，它們的值在 data 中定義。

4.2 數(shù)組語法

v-bind:style 的數(shù)組語法可以將多個樣式對象應(yī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: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é)我們學習了如何通過v-bind來動態(tài)綁定樣式。主要有以下知識點：

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

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

您可能感興趣的文章:

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

軟件下載

源碼下載

軟件編程

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

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue動態(tài)樣式綁定實例詳解

目錄

1. 簡介

2. 解釋

3.綁定元素的 Class

3.1 對象

3.1.1 對象語法

3.1.2 與普通的 class 屬性共存

3.1.3 利用計算屬性綁定樣式

3.2 數(shù)組語法

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

4.1 對象語法

4.2 數(shù)組語法

5. 小節(jié)

相關(guān)文章

最新評論

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

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

常用在線小工具