在Vue项目开发中往往需要通过某个变量来控制页面样式的展示，根据变量显示不同的样式，以此来表状态以及用户的操作等。下面我们一起整理下通过变量控制样式的语法表达式。
一、通过class名进行样式的控制
原始代码：
<template>
<div>
<div class="selected">Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
.size{
font-size: 20px;
}
</style>1.通过变量动态添加单个class名
<template>
<div>
<div class="size" :class="{'selected':control}" >Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
.size{
font-size: 20px;
}
</style>2.通过变量控制两个class名的切换
<template>
<div>
<div :class="[control?'selected':'warn','size']">Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
.size{
font-size: 20px;
}
</style>3.通过变量控制多个class名的切换
<template>
<div>
<div class="size" :class="changClass(control)">Vue动态控制样式</div>
<button @click="control = !control">控制样式展示</button>
</div>
</template>
<script>
export default {
data() {
return {
control: false,
};
},
methods: {
changClass(value) {
//为防止多个变量对应多个if判断造成代码复杂不易理解，建议使用switch语句
//不建议使用 if(value)'selected'
//当前仅做解释演示，真实项目中可能有多个样式匹配
switch (value) {
case true:
return "selected";
case false:
return "warn";
}
},
},
};
</script>
<style>
.selected {
color: aqua;
}
.warn {
color: red;
}
.size {
font-size: 20px;
}
</style>4.通过函数表达式控制class名
Vue中v-bind会将=后面的属性当做js表达式进行处理，所以我们可以直接使用数组对象的方法进行相关的处理以其结果作为显示的依据条件。也可以直接给一个处理判断结束后的变量表达式。
<template>
<div>
<div v-for="(items,index) of arr" :key="index" :class="arr.find(item=>items==4)?'selected':''">{
{ items }}</div>
<div class="size" :class="changClass(control)">Vue动态控制样式</div>
<button @click="control = !control">控制样式展示</button>
</div>
</template>
<script>
export default {
data() {
return {
control: false,
arr:[1,2,3,4,5,6,7]
};
},
methods: {
changClass(value) {
//为防止多个变量对应多个if判断造成代码复杂不易理解，建议使用switch语句
//不建议使用 if(value)'selected'
//当前仅做解释演示，真实项目中可能有多个样式匹配
switch (value) {
case true:
return "selected";
case false:
return "warn";
}
},
},
};
</script>
<style>
.selected {
color: aqua;
}
.warn {
color: red;
}
.size {
font-size: 20px;
}
</style>当前选中列表中第四个div元素
5.通过v-bind绑定多个变量控制样式
对于复杂场景来说一种比较好的解决方式，更加直观明了。
<template>
<div>
<button @click="changClass">控制样式展示</button>
<div v-bind="classObj">绑定多个变量控制样式</div>
</div>
</template>
<script>
export default {
data() {
return {
control: false,
//通过v-bind会将对应的属性添加到对应的元素上去，后续通过更改对象的值实现样式的更改
classObj:{
id:'id',
class:'selected size'
}
};
},
methods: {
changClass(value) {
this.classObj={
id:'id',
class:'warn size'
}
},
},
};
</script>
<style>
.selected {
color: aqua;
}
.warn {
color: red;
}
.size {
font-size: 20px;
}
</style>二、通过style进行样式的控制
原始代码：
<template>
<div>
<div style="fontSize:20px">Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
</style>1.通过变量控制style样式
点击按钮放大字体
<template>
<div>
<div :style="{'fontSize':size+'px'}">Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
<button @click="size+=1">点击放大字体</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false,
size:20
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
</style>2.通过三木表达式控制样式
与上面本质一样，只是提供一种思路。
<template>
<div>
<div :style="{'color':control?'aqua':'red'}">Vue动态控制样式</div>
<button @click="control=!control">控制样式展示</button>
<button @click="size+=1">点击放大字体</button>
</div>
</template>
<script>
export default {
data(){
return {
control:false,
size:20
}
}
}
</script>
<style>
.selected{
color: aqua;
}
.warn{
color: red;
}
</style>