9種方法介紹
-
直接使用靜態(tài)class和style屬性：
- 使用場(chǎng)景：當(dāng)class和style屬性是固定不變的時(shí)候，可以直接在模板中寫死。
- 優(yōu)點(diǎn)：簡(jiǎn)單直接，沒有額外的計(jì)算和邏輯。
- 缺點(diǎn)：無法根據(jù)條件動(dòng)態(tài)修改class和style。
-
使用v-bind動(dòng)態(tài)綁定class和style屬性：
- 使用場(chǎng)景：當(dāng)class和style屬性需要根據(jù)組件的data或props屬性動(dòng)態(tài)變化時(shí)，可以使用v-bind來動(dòng)態(tài)綁定。
- 優(yōu)點(diǎn)：可以根據(jù)條件動(dòng)態(tài)修改class和style。
- 缺點(diǎn)：需要在模板中寫表達(dá)式，有一定的復(fù)雜度。
-
使用計(jì)算屬性來動(dòng)態(tài)生成class和style對(duì)象：
- 使用場(chǎng)景：當(dāng)class和style屬性的計(jì)算邏輯比較復(fù)雜時(shí)，可以使用計(jì)算屬性來生成class和style對(duì)象。
- 優(yōu)點(diǎn)：代碼可讀性好，邏輯清晰。
- 缺點(diǎn)：需要定義額外的計(jì)算屬性。
-
使用動(dòng)態(tài)綁定的class和style屬性：
- 使用場(chǎng)景：當(dāng)class和style屬性的計(jì)算邏輯比較簡(jiǎn)單時(shí)，可以直接在模板中使用表達(dá)式來動(dòng)態(tài)生成class和style字符串。
- 優(yōu)點(diǎn)：簡(jiǎn)潔明了，沒有額外的計(jì)算屬性。
- 缺點(diǎn)：邏輯稍微復(fù)雜時(shí)，可讀性會(huì)變差。
-
使用數(shù)組語(yǔ)法來動(dòng)態(tài)綁定class屬性：
- 使用場(chǎng)景：當(dāng)class屬性需要根據(jù)多個(gè)條件動(dòng)態(tài)變化時(shí)，可以使用數(shù)組語(yǔ)法來動(dòng)態(tài)綁定class屬性。
- 優(yōu)點(diǎn)：可以根據(jù)多個(gè)條件動(dòng)態(tài)修改class。
- 缺點(diǎn)：數(shù)組語(yǔ)法相對(duì)復(fù)雜，可讀性較差。
-
使用動(dòng)態(tài)綁定的style屬性：
- 使用場(chǎng)景：當(dāng)style屬性需要根據(jù)組件的data或props屬性動(dòng)態(tài)變化時(shí)，可以使用動(dòng)態(tài)綁定的style屬性。
- 優(yōu)點(diǎn)：可以根據(jù)條件動(dòng)態(tài)修改style。
- 缺點(diǎn)：需要在模板中寫表達(dá)式，有一定的復(fù)雜度。
-
使用對(duì)象語(yǔ)法動(dòng)態(tài)綁定class屬性：
- 使用場(chǎng)景：當(dāng)class屬性需要根據(jù)多個(gè)條件動(dòng)態(tài)變化時(shí)，可以使用對(duì)象語(yǔ)法來動(dòng)態(tài)綁定class屬性。
- 優(yōu)點(diǎn)：可以根據(jù)多個(gè)條件動(dòng)態(tài)修改class。
- 缺點(diǎn)：對(duì)象語(yǔ)法相對(duì)復(fù)雜，可讀性較差。
-
使用計(jì)算屬性動(dòng)態(tài)綁定style屬性：
- 使用場(chǎng)景：當(dāng)style屬性的計(jì)算邏輯比較復(fù)雜時(shí)，可以使用計(jì)算屬性來動(dòng)態(tài)綁定style屬性。
- 優(yōu)點(diǎn)：代碼可讀性好，邏輯清晰。
- 缺點(diǎn)：需要定義額外的計(jì)算屬性。
-
使用動(dòng)態(tài)綁定的class和style屬性，通過在模板中使用數(shù)組和對(duì)象語(yǔ)法來動(dòng)態(tài)生成class和style字符串：文章來源：http://www.zghlxwxcb.cn/news/detail-687361.html
- 使用場(chǎng)景：當(dāng)class和style屬性需要根據(jù)多個(gè)條件動(dòng)態(tài)變化時(shí)，可以使用數(shù)組和對(duì)象語(yǔ)法來動(dòng)態(tài)綁定class和style屬性。
- 優(yōu)點(diǎn)：可以根據(jù)多個(gè)條件動(dòng)態(tài)修改class和style。
- 缺點(diǎn)：語(yǔ)法相對(duì)復(fù)雜，可讀性較差。
具體實(shí)現(xiàn)
在Uniapp和Vue中，可以使用以下9種方法來動(dòng)態(tài)添加綁定style和class：文章來源地址http://www.zghlxwxcb.cn/news/detail-687361.html
- 使用
v-bind指令（或簡(jiǎn)寫為:class和:style）來動(dòng)態(tài)綁定class和style屬性?？梢酝ㄟ^計(jì)算屬性或直接在模板中使用三元表達(dá)式來根據(jù)條件動(dòng)態(tài)設(shè)置class和style屬性。
<template>
<div :class="{'active': isActive}" :style="{'color': textColor}">Hello World</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
textColor: 'red'
}
}
}
</script>
- 使用
v-bind指令（或簡(jiǎn)寫為:class和:style）來動(dòng)態(tài)綁定class和style對(duì)象?？梢栽赿ata中定義一個(gè)對(duì)象，根據(jù)條件動(dòng)態(tài)設(shè)置class和style對(duì)象的屬性。
<template>
<div :class="classObject" :style="styleObject">Hello World</div>
</template>
<script>
export default {
data() {
return {
classObject: {
active: true,
'text-color': true
},
styleObject: {
color: 'red',
fontSize: '16px'
}
}
}
}
</script>
- 使用計(jì)算屬性來動(dòng)態(tài)生成class和style對(duì)象?？梢愿鶕?jù)組件的data或props屬性計(jì)算出class和style對(duì)象，并在模板中使用計(jì)算屬性。
<template>
<div :class="computedClass" :style="computedStyle">Hello World</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
textColor: 'red'
}
},
computed: {
computedClass() {
return {
active: this.isActive,
'text-color': this.textColor === 'red'
}
},
computedStyle() {
return {
color: this.textColor,
fontSize: '16px'
}
}
}
}
</script>
- 使用動(dòng)態(tài)綁定的class和style屬性，通過在模板中使用表達(dá)式來動(dòng)態(tài)生成class和style字符串。
<template>
<div :class="'active ' + (isActive ? 'active' : '')" :style="'color: ' + textColor">Hello World</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
textColor: 'red'
}
}
}
</script>
- 使用數(shù)組語(yǔ)法來動(dòng)態(tài)綁定class屬性?？梢栽赿ata中定義一個(gè)數(shù)組，根據(jù)條件動(dòng)態(tài)設(shè)置class數(shù)組的元素。
<template>
<div :class="classArray">Hello World</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isBold: true
}
},
computed: {
classArray() {
return ['active', {'bold': this.isBold}]
}
}
}
</script>
- 使用動(dòng)態(tài)綁定的style屬性，通過在模板中使用對(duì)象語(yǔ)法來動(dòng)態(tài)生成style字符串。
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
}
}
}
</script>
- 使用對(duì)象語(yǔ)法動(dòng)態(tài)綁定class屬性?？梢栽赿ata中定義一個(gè)對(duì)象，根據(jù)條件動(dòng)態(tài)設(shè)置class對(duì)象的屬性。
<template>
<div :class="classObject">Hello World</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isBold: true
}
},
computed: {
classObject() {
return {
active: this.isActive,
bold: this.isBold
}
}
}
}
</script>
- 使用計(jì)算屬性動(dòng)態(tài)綁定style屬性?？梢愿鶕?jù)組件的data或props屬性計(jì)算出style字符串，并在模板中使用計(jì)算屬性。
<template>
<div :style="computedStyle">Hello World</div>
</template>
<script>
export default {
data() {
return {
textColor: 'red',
fontSize: 16
}
},
computed: {
computedStyle() {
return `color: ${this.textColor}; font-size: ${this.fontSize}px;`;
}
}
}
</script>
- 使用動(dòng)態(tài)綁定的class和style屬性，通過在模板中使用數(shù)組和對(duì)象語(yǔ)法來動(dòng)態(tài)生成class和style字符串。
<template>
<div :class="['active', { 'bold': isBold }]">Hello World</div>
<div :style="[styleObject, { 'font-size': fontSize + 'px' }]">Hello World</div>
</template>
<script>
export default {
data() {
return {
isBold: true,
styleObject: {
color: 'red'
},
fontSize: 16
}
}
}
</script>
到了這里，關(guān)于vue、uniapp中動(dòng)態(tài)添加綁定style、class 9種方法實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
