本文主要是介绍Vue中绑定元素class，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue中绑定元素class

问题

使用Vue编写的页面中有3个内容块需要根据传入数据显示不同样式，比如传入“低风险”则显示绿色背景，“高风险”则显示红色背景。前端组已经做好了样式的封装，通过给元素设置不同的class特性即可调整样式。

解决过程

通过查阅Vue官方文档，学习了怎样绑定class。
起初，在computed中写了一个计算属性用来获取元素需要的class值：

<div class="area-head" :class="myClass"></div>

computed:{
	myClass() {
		if(this.level==='high'){
			return 'red-bgcolor'
		}else{
			return 'green-bgcolor'
		}
	  }
}

接着就发现内容块不同部分的样式都是由业务传入值决定的，可以将需要的不同部分的class值封装成一个对象，因此又编写了一个函数：

getMyClass(level){
	if(level==='high'){
		return {head:red-bgcolor,bottom:red-line}
	}else{
		return {head:green-bgcolor,bottom:green-line}
	}
}

这样，在html中就可以将class绑定这个函数获取样式:

<div class="area-head" :class="getMyClass(myData.level).head"></div>
	<span>{{myData.levelName}}</span>
<div class="area-bottom" :class="getMyClass(myData.level).bottom"></div>

后续

期待解锁更多更高效、更规范的解决方案

这篇关于Vue中绑定元素class的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！