前言
当你动态的添加类名，在某个变量匹配需求时自动切换到某个类名，实现其对应的效果。这个过程就是我们常说的动态 class，今天就和大家一起聊聊前端中的动态 class。
一、对象语法
1.1 绑定单个 class
我们可以传给
v-bind:class一个对象，以动态地切换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>
实现效果
1.2 绑定多个 class
对象中也可存在多个属性，动态切换
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>
渲染结果
1.3 绑定计算属性
当
:class的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用data或者computed，如下案例：
<template>
<div>
<div :class="taxonOne">内容内容内容</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>
渲染结果
二、数组语法
2.1 class 列表
当需要应用多个
class时，可以使用数组语法，给:class绑定一个数组，如下案例：
<template>
<div>
<div v-bind:class="['taxonOne', 'taxonTwo']">内容内容内容</div>
</div>
</template>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
border: 1px solid blue;
}
</style>
渲染结果
2.2 三元运算符
使用三元表达式，根据条件切换
class，如下案例：
<template>
<div>
<div v-bind:class="[isActive ? 'taxonOne' : 'taxonTwo']">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
当
isActive为true时的渲染结果
反之，当
isActive为false时的渲染结果
2.3 数组语法 + 对象语法
class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法，如下案例：
<template>
<div>
<div v-bind:class="[{ taxonOne: isActive }, 'taxonTwo']">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
<style scoped>
.taxonOne {
border: 1px solid red;
}
.taxonTwo {
color: blue;
}
</style>
渲染结果
三、复合形式
你可以将
v-if/v-else-if和:class相结合进行使用，如下案例：
<template>
<div>
<div v-if="state == '0'" class="taxonOne">内容内容内容</div>
<div v-else-if="state == '1'" class="taxonTwo">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
当
state为0时，渲染结果
当
state为1时，渲染结果
:style
除了上面我们说到的动态 class，我们也可以直接动态的绑定 style ，下面一起来看看如何在标签中绑定内联样式。
注意:
- 凡是有
-的style属性名都要变成驼峰式，比如font-size要变成fontSize； - 除了绑定值，其他的属性名的值要用引号括起来，比如
fontSize:'14px'而不是fontSize:14px。
一、 对象形式
1.1 直接绑定
这也是最简单的一种形式，直接绑定，如下案例：
<template>
<div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
activeColor: "red",
fontSize: 30,
};
},
};
</script>
渲染结果
1.2 三目运算符
三目运算符主要针对变量会动态变化时切换不同的
style会比较方便，如下案例：
<template>
<div>
<div :style="{ color: state == '0' ? 'red' : 'blue'}">内容内容内容</div>
<div :style="state == '1' ? 'color:red' : 'color:blue'">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
渲染结果
1.3 计算属性
当逻辑比较复杂时，可以通过绑定一个计算属性，如下案例：
<template>
<div>
<div :style="styleState(0)">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
styleState() {
return function (index) {
return index == 0 ? "color: red" : "color: blue";
};
},
},
};
</script>
渲染结果
二、 数组形式
2.1 直接绑定
<template>
<div>
<div :style="[styleOne, styleTwo]">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
styleOne: {
border:"1px solid blue"
},
styleTwo: {
color: "red",
},
};
},
};
</script>
渲染结果
2.2 三目运算符
<template>
<div>
<div :style="[{color:(state == '0' ? 'red' : 'blue')}]">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {
state: "0",
};
},
};
</script>
渲染结果
三、调用方法
同样，你也可以选择调用一个方法，如下案例：
<template>
<div>
<div :style="setStyle(0)">内容内容内容</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
setStyle(index) {
return index == 0 ? "color: red" : "color: blue";
},
},
};
</script>
渲染结果
拓展
以上我们展示的都是在 vue 中使用，那在别的平台该如何使用呢？其实是大同小异的，可能在语法上会有一点点的不同，下面来看看在 uniapp 和微信小程序中如何使用动态 class。
uniapp 中的动态 class
:class="[{'类名':条件},{'类名':条件},{'类名':条件}]"
<template>
<view>
<view :class="[{'taxonOne' : index == '0'},{'taxonTwo' : index == '1'}]">内容内容内容</view>
</view>
</template>
<script>
export default {
data() {
return {
index: "0"
}
},
}
</script>
<style scoped>
.taxonOne {
color: red;
}
.taxonTwo {
color: blue;
}
</style>
当
index为0时，渲染结果
当
index为1时，渲染结果
微信小程序中的动态 class
index.wxml
<view class="{{ state == '0' ? 'taxonOne' : 'taxonTwo' }}">内容内容内容</view>
index.js
Page({
data: {
state: '1'
},
})
index.wxss
.taxonOne{
color: red;
}
.taxonTwo{
color: blue;
}
当
state为0时，渲染结果
当
state为1时，渲染结果
