vue星星评分含半星
作者：互联网
模拟数据 data中定义 datalist ：[{
text: '1. 是否是日程表中老师授课？',
type == 1,
value: ''
}]
核心代码：
itemCurIndex(score, indexs) 第一个参数为分数，第二个参数为第几道题
getScoreType(ind, score)第一个参数为当前列表第几个星星，第二个参数为当前列表的分数 作用是给循环的星星添加相应的class
<div class="item-star" >
<div
class="star"
v-for="(items, indexs) in 5"
:key="indexs"
:class="getScoreType(indexs, datalist[index].value)"
>
<a
href="javaScript:;"
@click="
type == 1 ? itemCurIndex((indexs + 1) * 2 - 1, index) : '' //此处用来根据条件判断是评价还是查看
"
></a>
<a
href="javaScript:;"
@click="type == 1 ? itemCurIndex((indexs + 1) * 2, index) : ''"
></a>
</div>
</div>
js部分
itemCurIndex(score, indexs) {
this.datalist[indexs].value = score
},
getScoreType(ind, score) {
if (score) {
var startFullIndex = score / 2
if (ind + 1 <= startFullIndex) {
return 'full'
} else if (ind + 1 > startFullIndex && ind + 1 < startFullIndex + 1) {
return 'half'
} else {
return 'null'
}
} else {
return 'null'
}
},
效果图
标签：星星,vue,datalist,score,参数,ind,indexs,含半星 来源： https://www.cnblogs.com/smokefish/p/16177933.html