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

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

 更新時(shí)間：2023年04月07日 08:42:24   作者：很酷的站長(zhǎng)  
眾所周知vue是操作dom元素的,那么如果有元素要?jiǎng)討B(tài)綁定樣式,這種需求,還是要通過(guò)改變數(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é)，再通過(guò)反復(fù)的練習(xí)來(lái)加深印象。

2. 解釋

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

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

3.綁定元素的 Class

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

3.1 對(duì)象

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

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

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

代碼解釋?zhuān)?/strong>

上面的語(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>

代碼解釋?zhuān)?/strong>

HTML 代碼第 2 行，我們給 div 綁定來(lái)樣式，當(dāng) isHide 為真值時(shí)， 其渲染結(jié)果為 <div class="hide"></div>，否則 <div></div>。
打開(kāi)控制臺(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>

代碼解釋?zhuān)?/strong>

當(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>

代碼解釋?zhuān)?/strong>

HTML 代碼中，我們首先給 div 一個(gè)固定樣式 defaultClass， 然后通過(guò) 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>

代碼解釋?zhuān)?/strong>

HTML 代碼中，我們通過(guò) 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>

代碼解釋?zhuān)?/strong>

在 HTML 代碼中，我們通過(guò)數(shù)組給 div 綁定樣式，數(shù)組中有 classA 和 classB 兩個(gè)值。

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

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

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

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

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

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

代碼解釋?zhuān)?/strong>

在 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 的綁定同樣可以通過(guò)數(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>

代碼解釋?zhuān)?/strong>

在 HTML 代碼中，我們給 div 綁定 background-color 和 width 兩個(gè)內(nèi)聯(lián)樣式，它們的值在 data 中定義。

在模板中寫(xiě)較為復(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>

代碼解釋?zhuān)?/strong>

在 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í)了如何通過(guò)v-bind來(lái)動(dòng)態(tài)綁定樣式。主要有以下知識(shí)點(diǎn)：

通過(guò) v-bind:class 動(dòng)態(tài)綁定元素的 Class；v-bind:style 動(dòng)態(tài)綁定元素的內(nèi)聯(lián)樣式；如果通過(guò)數(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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論