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>