Vue動態(tài)樣式綁定實(shí)例詳解
1. 簡介
本小節(jié)我們將介紹 Vue 中如何動態(tài)綁定樣式。包括 Class 的綁定、內(nèi)聯(lián)樣式 Style 的綁定。掌握樣式綁定的多種形式是其中的重點(diǎn)難點(diǎn)。同學(xué)們可以在學(xué)完本小節(jié)之后對樣式的綁定方式加以總結(jié)，再通過反復(fù)的練習(xí)來加深印象。
2. 解釋
操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求。因?yàn)樗鼈兌际菍傩裕晕覀兛梢杂?v-bind 處理它們：只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(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 綁定來樣式，當(dāng) 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 }">
當(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 變化時，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)定義在模板里， 這樣顯得比較繁瑣。其實(shí)，我們可以統(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 利用計(jì)算屬性綁定樣式
<div v-bind:class="classObject"></div>
我們也可以在這里綁定一個返回對象的 計(jì)算屬性 。這是一個常用且強(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，它返回一個對象，該對象有兩個屬性：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，可以用三元表達(dá)式：
<div v-bind:class="[isShow ? showClass : '', classB]"></div>
這樣寫將始終添加 classB 的樣式，但是只有在 isShow 為真時才添加 showClass。
不過，當(dāng)有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象的形式來表達(dá)數(shù)組中的某一項(xiàng)：
<div v-bind:class="[{ showClass: isShow }, classB]"></div>代碼解釋：
在 HTML 中，div 綁定一個樣式數(shù)組，數(shù)組第一項(xiàng)是一個對象表達(dá)式 { showClass: isShow }。當(dāng) isShow 為 true 時樣式最終綁定為：<div v-bind:class="[showClass, classB]"></div>；當(dāng) isShow 為 false 時樣式最終綁定為：<div v-bind:class="[classB]"></div>；
4.綁定內(nèi)聯(lián)樣式
和 Class 的綁定一樣，Style 的綁定同樣可以通過數(shù)組和對象的兩種形式。
4.1 對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實(shí)是一個 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 中定義。
在模板中寫較為復(fù)雜的表達(dá)式語法顯得比較繁瑣，通常直接綁定到一個樣式對象更好，這會讓模板顯得更加清晰：
<!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é)我們學(xué)習(xí)了如何通過v-bind來動態(tài)綁定樣式。主要有以下知識點(diǎn)：
通過 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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問題，本文通過項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
這篇文章主要介紹了Vue框架TypeScript裝飾器使用指南小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue結(jié)合axios與后端進(jìn)行ajax交互的方法
本篇文章主要介紹了vue結(jié)合axios與后端進(jìn)行ajax交互的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue 嵌套路由使用總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue中封裝input組件的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個基于 Vue.js 的移動端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2018-04-04
使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-08-08