v-bind如何動(dòng)態(tài)綁定class屬性
這篇文章主要介紹“v-bind如何動(dòng)態(tài)綁定class屬性”，在日常操作中，相信很多人在v-bind如何動(dòng)態(tài)綁定class屬性問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”v-bind如何動(dòng)態(tài)綁定class屬性”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比黃浦網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式黃浦網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黃浦地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。
v-bind可以動(dòng)態(tài)設(shè)置class屬性，用以實(shí)現(xiàn)動(dòng)態(tài)樣式。寫法：
<!--完整寫法--> <標(biāo)簽名 v-bind:class="vue實(shí)例中的數(shù)據(jù)屬性名"/> <!--簡(jiǎn)化寫法--> <標(biāo)簽名 :class="vue實(shí)例中的數(shù)據(jù)屬性名"/>
一、v-bind動(dòng)態(tài)綁定class屬性（對(duì)象語(yǔ)法）
動(dòng)態(tài)綁定class屬性之后，class的值是一個(gè)變量，可以將它放到data中動(dòng)態(tài)綁定樣式，以動(dòng)態(tài)地切換 class。
1、直接通過(guò){}綁定一個(gè)或多個(gè)類
v-blid:class的屬性中可以傳入一個(gè)對(duì)象，對(duì)象中包括一組組鍵值對(duì)
:class= "{key1：value1，key2：value2...}"類名就是對(duì)應(yīng)的樣式，也就是鍵（key）；value就是對(duì)應(yīng)著增加和移除該類，取值是true和false
若value值為
true，則該key樣式起作用若value值為
false，則該key樣式不起作用
<!-- 樣式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h3 class="color">{{message}}</h3>
<!-- 第一種：直接用style中的樣式，固定寫死； -->
<h3 v-bind:class="color">{{message}}</h3>
<!-- 第二種：用指令v-bind,class的屬性值color為變量； -->
<!-- vue解析，變量對(duì)應(yīng)data中color屬性值，則用了color的樣式； -->
<h3 v-bind:class="{color:isColor, background:isBackground}">{{message}}</h3>
<!-- 第三種：用指令v-bind；后面接對(duì)象{key1：value1，key2：value2} -->
<!-- isColor為false則color樣式不起作用。 -->
<!-- isBackground為true則background樣式起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
color:"color",
isColor:false,
isBackground:true
}
})
</script>
v-bind:class 指令也可以與普通的 class 屬性共存。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>data: {
isActive: true,
hasError: true
}
當(dāng) isActive 或者 hasError 變化時(shí)，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 false，class 列表將變?yōu)?"static active"。
data: {
isActive: true,
hasError: false
}
2、綁定的數(shù)據(jù)對(duì)象不必內(nèi)聯(lián)定義在模板里，可綁定到一個(gè)類對(duì)象classObject
<!-- 樣式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h3 v-bind:class="classObject">{{message}}</h3>
<!-- 如下：綁定到一個(gè)類對(duì)象classObject，對(duì)象中設(shè)置多個(gè)key:value對(duì) -->
<!-- color為true則color樣式起作用。 -->
<!-- background為false則background樣式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
classObject: {
color: true,
background: false
}
}
})
</script>
3、也可以綁定一個(gè)返回對(duì)象的計(jì)算屬性
<div id="app">
<h3 v-bind:class="classObject">{{message}}</h3>
<!-- 如下：綁定到一個(gè)類對(duì)象classObject，對(duì)象中設(shè)置多個(gè)key:value對(duì) -->
<!-- color為true則color樣式起作用。 -->
<!-- background為false則background樣式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isColor: true,
isBackground: true
},
computed: {
classObject: function () {
return {
color: this.isColor,
background: this.isBackground
}
}
}
})
</script>
4、class中的對(duì)象比較復(fù)雜，則直接放在一個(gè)methods中，然后調(diào)用這個(gè)函數(shù)，實(shí)現(xiàn)動(dòng)態(tài)切換
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h3 :class="getClasses()">方法methods：{{message}}</h3>
<h3 :class="classes">計(jì)算屬性computed：{{message}}</h3>
<button v-on:click="btnClick">按鈕</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
isAcitve:true,
isLine:true
},
methods:{
btnClick: function () {
this.isAcitve = !this.isAcitve
},getClasses:function () {
return {active:this.isAcitve,line:this.isLine}
}
},
computed: {
classes: function () {
return {active:this.isAcitve,line:this.isLine}
}
}
})
</script>
</body>
</html>
二、v-bind動(dòng)態(tài)綁定class屬性（數(shù)組語(yǔ)法）
我們可以把一個(gè)數(shù)組傳給 :class，以應(yīng)用一個(gè) class 列表；
數(shù)組語(yǔ)法格式為：
:class="[base1,base2]"
v-bind 動(dòng)態(tài)綁定class 數(shù)組語(yǔ)法，就是直接給其傳入一個(gè)數(shù)組，但是數(shù)組里面都是類名，數(shù)組中的類名，在頁(yè)面中都會(huì)被加入到該標(biāo)簽上。通過(guò)數(shù)組內(nèi)元素的增加或減少來(lái)實(shí)現(xiàn)，樣式的改變。
注意：這里面的類名都需要用
' '包裹起來(lái)，如果沒(méi)有包裹起來(lái)，Vue會(huì)將其當(dāng)成data里面的某個(gè)屬性，而去data里面尋找，顯然data里面是沒(méi)有該屬性的，那么報(bào)錯(cuò)也就來(lái)了。這一點(diǎn)在Vue中都是通用的，沒(méi)加引號(hào)當(dāng)成data里面的屬性來(lái)處理
注：和對(duì)象語(yǔ)法一樣，可以和普通的類同時(shí)存在，并不沖突
<h3 class="title" :class="['active','line']">{{message}}</h3>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h3 :class="['active','line']">{{message}}</h3>
<h3 :class="[active,line]">{{message}}</h3>
<h3 :class="[active,line]">{{message}}</h3>
<h3 :class="getClasses()">方法methods：{{message}}</h3>
<h3 :class="classes">計(jì)算屬性computed：{{message}}</h3>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
line:'bbbbbbbbbb'
},
methods:{
getClasses: function () {
return [this.active,this.line]
}
},
computed: {
classes: function () {
return [this.active,this.line]
}
}
})
</script>
</body>
</html>
如果你也想根據(jù)條件切換列表中的 class，可以用三元表達(dá)式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
這樣寫將始終添加 errorClass，但是只有在 isActive 是 true 時(shí)才添加 activeClass。
不過(guò)，當(dāng)有多個(gè)條件 class 時(shí)這樣寫有些繁瑣。所以在數(shù)組語(yǔ)法中也可以使用對(duì)象語(yǔ)法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>示例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.aaa{
padding: 10px;
}
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="['aaa','active']">{{message}}</div>
<div :class="['aaa', nba, isActive? 'active': '']">{{message}}</div>
<div :class="['aaa', nba, {'actvie': isActive}]">{{message}}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: "Hello World",
nba: 'line',
isActive: false
}
}
})
</script>
</body>
</html>
到此，關(guān)于“v-bind如何動(dòng)態(tài)綁定class屬性”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
網(wǎng)站欄目：v-bind如何動(dòng)態(tài)綁定class屬性
當(dāng)前地址：http://www.chinadenli.net/article0/jigsio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、標(biāo)簽優(yōu)化、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站制作設(shè)計(jì)發(fā)展的七大趨勢(shì)？ 2021-11-10
- 成都網(wǎng)站制作時(shí)怎么樣才能做好內(nèi)容？ 2021-10-09
- 滁州營(yíng)銷型網(wǎng)站制作：建設(shè)營(yíng)銷網(wǎng)站如何選擇關(guān)鍵詞呢？ 2021-08-23
- 成都網(wǎng)站制作的流程是怎樣的？ 2013-06-01
- 高端網(wǎng)站制作有哪些需要注意的問(wèn)題 2016-04-05
- 企業(yè)網(wǎng)站制作完成之后不宜多做版面改動(dòng) 2016-12-03
- 手機(jī)建站的那些事 2016-11-06
- 為什么網(wǎng)站打開速度比較慢網(wǎng)站制作公司來(lái)告訴你 2015-04-18
- 如何明確網(wǎng)站制作的重點(diǎn) 2021-09-09
- 網(wǎng)站建設(shè)要贏在起點(diǎn) 2022-05-27
- 成都網(wǎng)站制作與設(shè)計(jì)都是什么？請(qǐng)別再傻了 2013-09-22
- 成都企業(yè)網(wǎng)站制作規(guī)范：我們應(yīng)該做什么? 2023-02-26