vue中computed根据不同的状态值改变不同的样式
在做项目的时候遇到了如题的需求,解决方式如下1.用来接收这个状态值的变量是在data中定义了的值,那么html中不用传参,在computed中直接用this.xxx就可以改变,代码如下:<template><div class="main" :style="{'background':getBackground}"></div></template>
·
在做项目的时候遇到了如题的需求,解决方式如下
1.用来接收这个状态值的变量是在data中定义了的值,那么html中不用传参,在computed中直接用this.xxx就可以改变,代码如下:
<template>
<div class="main" :style="{'background':getBackground}"></div>
</template>
<script>
data(){
return {
state: 2
}
}
computed: {
getBackground() {
switch (this.state) {
case 2:
return 'rgba(49, 198, 174, 0.06)';
case 3:
return 'rgba(244, 66, 66, 0.06)';
default:
return 'rgba(255, 255, 255, 1)';
}
}
}
</script>
2.data中没有用来接受这个状态值的变量,那么就只能在html中使用传参传入,这时computed里面不能直接接收到传入的这个参数值,就要return function(a)这样传入,具体代码如下:
<template>
<div class="main" v-for="(item, index) in list" :key="index">
<span class="text" :style="{'color':colorText(item.message)}">{{item.msgState}}</span>
</div>
</template>
<script>
data(){
return {
list:[{
message: '成功'
},{
message: '等待'
},{
message: '失败'
}]
}
}
computed:{
colorText(){
return function (message) {
switch (message) {
case '成功': return 'rgba(74,74,74,1)';
case '失败': return 'rgba(244,66,66,1)';
case '等待': return 'rgba(162,162,162,1)';
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)