vue星星評分含半星
阿新 • • 發佈：2022-04-22
模擬資料 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'
}
},
效果圖