uni——switch判断，根据状态判断并对文字和样式切换

案例展示

代码

<view :class="itemClass">
	{{itemText}}
</view>

data() {
	return {
		jlType: 3
	}
},
computed: {
	itemClass() {
		let className;
		switch (this.jlType) {
			case 1:
				className = 'jl1'
				break;
			case 2:
				className = 'jl2'
				break;
			case 3:
				className = 'jl3'
				break;
			case 4:
				className = 'jl4'
				break;
			case 5:
				className = 'jl5'
				break;
		}
		return className;
	},
	itemText() {
		let text;
		switch (this.jlType) {
			case 1:
				text = '奖励1'
				break;
			case 2:
				text = '奖励2'
				break;
			case 3:
				text = '奖励3'
				break;
			case 4:
				text = '奖励4'
				break;
			case 5:
				text = '奖励5'
				break;

		}
		return text;
	}
},

// 颜色模块
.jl1 {
	color: #304D99;
}

.jl2{
	color: #F87D3A;
}

.jl3 {
	color: #F44770;
}

.jl4  {
	color: #46A836;
}

.jl5 {
	color: #6874F0;
}