VUE中如何動(dòng)態(tài)綁定類名和樣式

更新時(shí)間：2023年06月05日 10:31:59 作者：A7Feather

這篇文章主要介紹了VUE中如何動(dòng)態(tài)綁定類名和樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

VUE動(dòng)態(tài)綁定類名和樣式

1、使用v-bind屬性綁定class和style屬性

2、動(dòng)態(tài)類名兩種方式：

對(duì)象形式：給對(duì)象屬性賦boolean類型值
數(shù)組配合三元運(yùn)算符，通過(guò)改變條件的真假實(shí)現(xiàn)類名的添加和刪除

<template>
? <div>
? ? <div :class="classObj">動(dòng)態(tài)綁定對(duì)象</div>
? ? <div :class="['namebox', activeStatus ? 'activeNamebox' : '']">
? ? ? 動(dòng)態(tài)綁定數(shù)組
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? classObj: {
? ? ? ? namebox: true,
? ? ? ? activeNamebox: false
? ? ? },
? ? ? activeStatus: false
? ? }
? }
}
</script>
<style>
.namebox {
? color: #777;
}
.activeNamebox {
? background-color: aquamarine;
}
</style>

3、動(dòng)態(tài)樣式的兩種方式

對(duì)象形式
數(shù)組(包含樣式對(duì)象)形式：可以同時(shí)添加多個(gè)樣式對(duì)象

<template>
? <div>
? ? <div :style="styleObj1">對(duì)象形式</div>
? ? <div :style="[styleObj1, styleObj2]">數(shù)組形式</div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? styleObj1: {
? ? ? ? color: '#eee'
? ? ? },
? ? ? styleObj2: {
? ? ? ? textAlign: center
? ? ? }
? ? }
? }
}
</script>
<style></style>

動(dòng)態(tài)綁定樣式——動(dòng)態(tài)綁定style寫法 & 動(dòng)態(tài)class寫法

1、動(dòng)態(tài)綁定style寫法

注意：

凡是有-的style屬性名都要變成駝峰式，比如font-size要變成fontSize

除了綁定值，其他的屬性名的值要用引號(hào)括起來(lái)，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff

1.1、對(duì)象

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

1.2、數(shù)組

<div :style="[baseStyles, overridingStyles]"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

1.3、三元運(yùn)算符

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
<!-- 寫法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>
<!-- 寫法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>
<!-- 寫法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>

1.4、綁定data對(duì)象

<div :style="styleObject"></div>
<script>
? ? data() {
? ? ? ? return{
? ? ? ? ? styleObject: {
? ? ? ? ? ? color: 'red',
? ? ? ? ? ? fontSize: '14px'
? ? ? ? ? } ?
? ? ? ? }
? ? }
</scrip>

2、動(dòng)態(tài)class寫法

2.1、對(duì)象方法

<!-- isActive —— true/false -->
<div :class="{ 'active': isActive ?}">{{name}}</div>?

2.2、判斷是否綁定一個(gè)active

<div :class="{'active' : isActive == -2}" ?>{{name}}</div>
<div :class="{'active' : isActive == item.nameId}" ?>{{item.name}}</div>

2.3、綁定并判斷多個(gè)

2.31、第一種：用逗號(hào)隔開(kāi)

<div :class="{ 'active': isActive, 'user': isUser }"></div>

2.32、放在data里面

<div :class="classObject">{{name}}</div>
<script>
data() {
? return {
? ? classObject:{ active: true, user:false }
? }
}
</script>

2.33、使用computed屬性

<div :class="classObject">{{name}}</div>
<script>
data() {
? return {
? ? isActive: true,
? ? isUser: false
? }
},
computed: {
? classObject: function () {
? ? return {
? ? ? active: this.isActive,
? ? ? user:this.isUser
? ? }
? }
}
</script>

2.4、數(shù)組方法

2.41、單純數(shù)組

<div :class="[isActive,isUser]">{{name}}</div>
<script>
data() {
? return{
? ? isActive:'active',
? ? isUser:'user'
?}
}
</script>

2.42、數(shù)組與三元運(yùn)算符結(jié)合判斷選擇需要的class

注意：三元運(yùn)算符后面的“：”兩邊的class需要加上單引號(hào)，否則不能正確渲染

:class="[isActive?‘a(chǎn)ctive':'']"
或者
:class="[isActive1?‘a(chǎn)ctive':'']"
或者
:class="[isActiveindex?‘a(chǎn)ctive':'']"
或者
:class="[isActive==index?‘a(chǎn)ctive':‘otherActiveClass']"

2.43、數(shù)組對(duì)象結(jié)合動(dòng)態(tài)判斷

//前面這個(gè)active在對(duì)象里面可以不加單引號(hào)，后面這個(gè)sort要加單引號(hào)
:class="[{ active: isActive }, ‘sort']"
或者
:class="[{ active: isActive1 }, ‘sort']"
或者
:class="[{ active: isActiveindex }, ‘sort']"