需求是医疗水平，价格水平，服务态度分值都为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>