在做项目的时候遇到了如题的需求,解决方式如下
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>
Logo

前往低代码交流专区

更多推荐