v-if,v-else-if, v-else的实际使用

在这里插入图片描述
需求是医疗水平,价格水平,服务态度分值都为0-10分,1-4分是红色,5-7分是黄色,8-10分是绿色,数据均从后台请求过来的。

一开始想的是通过Vue中ref属性,可以获取到当前元素,在数据请求回来后直接通过map遍历,然后直接行内修改样式的方法

this.refs.medicalScore.style.color = 'yellow'

后来发现不行,通过打断点自己写的if语句都能走通,但赋值结果只以最后一次的颜色为基准,应该是map的遍历的方法原因,后一次吧前一个赋值的结果给覆盖掉了。

现在想想当时写的的确不对,因为这是评价会有好多条的,而我的赋值是给同一个标签赋的颜色所以会覆盖掉,而我应该在遍历这条评价的时候进行赋值颜色
因此用的了v-if,其实v-show也可以的。

正确的代码为:

<li>
	<p>医疗水平:
	     <span v-if="item.medicalScore>0&&item.medicalScore<=4"
	           style="color:#FB1818">{{item.medicalScore}}分span>
	     <span v-else-if="item.medicalScore>=5&&item.medicalScore<=7"
	           style="color:#F5A623">{{item.medicalScore}}分span>
	     <span v-else style="color:#00D7AE">{{item.medicalScore}}分span>
	 p>
 li>
 <li>
	 <p>价格水平:
	     <span v-if="item.priceScore>0&&item.priceScore<=4"
	           style="color:#FB1818">{{item.priceScore}}分span>
	     <span v-else-if="item.priceScore>=5&&item.priceScore<=7"     
	           style="color:#F5A623">{{item.priceScore}}分span>
	     <span v-else style="color:#00D7AE">{{item.priceScore}}分span>
	 p>
 li>
 <li>
	 <p>服务态度:
	     <span v-if="item.serviceScore>0&&item.serviceScore<=4"
	           style="color:#FB1818">{{item.serviceScore}}分span>
	     <span v-else-if="item.serviceScore>=5&&item.serviceScore<=7"
	           style="color:#F5A623">{{item.serviceScore}}分span>
	     <span v-else style="color:#00D7AE">{{item.serviceScore}}分span>
	 p>
 li>

你可能感兴趣的:(Vue)