前言
當你動態(tài)的添加類名，在某個變量匹配需求時自動切換到某個類名，實現(xiàn)其對應的效果。這個過程就是我們常說的動態(tài) class，今天就和大家一起聊聊前端中的動態(tài) class。
一、對象語法
1.1 綁定單個 class
我們可以傳給
v-bind:class一個對象，以動態(tài)地切換class，如下案例：
<template>
<div>
<el-button @click="clickOn" v-bind:class="{'active':isActive}">點擊我</el-button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
methods: {
clickOn() {
this.isActive = !this.isActive;
},
},
};
</script>
<style scoped>
.active {
color: red;
}
</style>
實現(xiàn)效果
1.2 綁定多個 class
對象中也可存在多個屬性，動態(tài)切換
class，并且:class可以合class共存，如下案例：
<template>
<div>
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: true,
};
},
};
</script>
渲染結(jié)果
1.3 綁定計算屬性
當
:class的表達式過長或邏輯復雜時，可以綁定一個計算屬性，一般當條件多于兩個時，都可以使用data或者computed，如下案例：
<template>
<div>
<div :class="taxonOne">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isError: null,
error: {
type: "fail",
},
};
},
computed: {
taxonOne() {
return {
taxonTwo: this.isActive && this.error == null, // (isActive 為 true 且 error 為 null) 類名為 taxonTwo
taxonTherr: this.error && this.error.type == "fail", // (error 不為空且 error 中的 type 值為 "fail") 類名為 taxonTherr
};
},
},
};
</script>
<style scoped>
.taxonTwo {
color: red;
}
.taxonTherr {
color: blue;
}
</style>
渲染結(jié)果
二、數(shù)組語法
2.1 class 列表
當需要應用多個
class時，可以使用數(shù)組語法，給:class綁定一個數(shù)組，如下案例：
<template>
<div>
<div v-bind:class="['taxonOne', 'taxonTwo']">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
border: 1px solid blue;
}
</style>
渲染結(jié)果
2.2 三元運算符
使用三元表達式，根據(jù)條件切換
class，如下案例：
<template>
<div>
<div v-bind:class="[isActive ? 'taxonOne' : 'taxonTwo']">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
當
isActive為true時的渲染結(jié)果
反之，當
isActive為false時的渲染結(jié)果
2.3 數(shù)組語法 + 對象語法
class有多個條件時，這樣寫較為煩瑣，可以在數(shù)組語法中使用對象語法，如下案例：
<template>
<div>
<div v-bind:class="[{ taxonOne: isActive }, 'taxonTwo']">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
<style scoped>
.taxonOne {
border: 1px solid red;
}
.taxonTwo {
color: blue;
}
</style>
渲染結(jié)果
三、復合形式
你可以將
v-if/v-else-if和:class相結(jié)合進行使用，如下案例：
<template>
<div>
<div v-if="state == '0'" class="taxonOne">內(nèi)容內(nèi)容內(nèi)容</div>
<div v-else-if="state == '1'" class="taxonTwo">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
當
state為0時，渲染結(jié)果
當
state為1時，渲染結(jié)果文章來源：http://www.zghlxwxcb.cn/news/detail-743984.html
:style
除了上面我們說到的動態(tài) class，我們也可以直接動態(tài)的綁定 style ，下面一起來看看如何在標簽中綁定內(nèi)聯(lián)樣式。
注意:
- 凡是有
-的style屬性名都要變成駝峰式，比如font-size要變成fontSize； - 除了綁定值，其他的屬性名的值要用引號括起來，比如
fontSize:'14px'而不是fontSize:14px。
一、 對象形式
1.1 直接綁定
這也是最簡單的一種形式，直接綁定，如下案例：
<template>
<div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: "red",
fontSize: 30,
};
},
};
</script>
渲染結(jié)果
1.2 三目運算符
三目運算符主要針對變量會動態(tài)變化時切換不同的
style會比較方便，如下案例：
<template>
<div>
<div :style="{ color: state == '0' ? 'red' : 'blue'}">內(nèi)容內(nèi)容內(nèi)容</div>
<div :style="state == '1' ? 'color:red' : 'color:blue'">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
渲染結(jié)果
1.3 計算屬性
當邏輯比較復雜時，可以通過綁定一個計算屬性，如下案例：
<template>
<div>
<div :style="styleState(0)">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
styleState() {
return function (index) {
return index == 0 ? "color: red" : "color: blue";
};
},
},
};
</script>
渲染結(jié)果
二、 數(shù)組形式
2.1 直接綁定
<template>
<div>
<div :style="[styleOne, styleTwo]">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
styleOne: {
border:"1px solid blue"
},
styleTwo: {
color: "red",
},
};
},
};
</script>
渲染結(jié)果
2.2 三目運算符
<template>
<div>
<div :style="[{color:(state == '0' ? 'red' : 'blue')}]">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
渲染結(jié)果
三、調(diào)用方法
同樣，你也可以選擇調(diào)用一個方法，如下案例：
<template>
<div>
<div :style="setStyle(0)">內(nèi)容內(nèi)容內(nèi)容</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
setStyle(index) {
return index == 0 ? "color: red" : "color: blue";
},
},
};
</script>
渲染結(jié)果
拓展
以上我們展示的都是在 vue 中使用，那在別的平臺該如何使用呢？其實是大同小異的，可能在語法上會有一點點的不同，下面來看看在 uniapp 和微信小程序中如何使用動態(tài) class。
uniapp 中的動態(tài) class
:class="[{'類名':條件},{'類名':條件},{'類名':條件}]"
<template>
<view>
<view :class="[{'taxonOne' : index == '0'},{'taxonTwo' : index == '1'}]">內(nèi)容內(nèi)容內(nèi)容</view>
</view>
</template>
<script>
export default {
data() {
return {
index: "0"
}
},
}
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
當
index為0時，渲染結(jié)果
當
index為1時，渲染結(jié)果
微信小程序中的動態(tài) class
index.wxml
<view class="{{ state == '0' ? 'taxonOne' : 'taxonTwo' }}">內(nèi)容內(nèi)容內(nèi)容</view>
index.js
Page({
data: {
state: '1'
},
})
index.wxss
.taxonOne{
color: red;
}
.taxonTwo{
color: blue;
}
當
state為0時，渲染結(jié)果
當
state為1時，渲染結(jié)果
文章來源地址http://www.zghlxwxcb.cn/news/detail-743984.html
到了這里，關(guān)于前端魔法：掌握動態(tài) class，讓網(wǎng)頁元素隨心所欲的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
