vue 五星評分及資料為遍歷
阿新 • • 發佈:2018-12-22
div class="star" style="float: right" > <span v-for="(itemClass,index) in y.itemClasses" :class="itemClass" data="1" class="star-item" :track-by="index" ></span> </div>
遍歷資料並重新賦值
let list = response.data.data.data; that.url = http; list.forEach(item=>{ item.itemClasses= that.itemClasses(item.certificate_level) });
methods:{ itemClasses(score_){ score_ = typeof score_ === 'number'?score_:Number(score_); // this.score>5 ? this.score=5 : this.score; score_ = score_>=5 ? 5 : score_; let result = []; let score =Math.floor(score_ * 2) / 2; let hasDecimal = score % 1 !==0; let integer = Math.floor(score); for(let i=0;i<integer;i++){ result.push("on"); } if(hasDecimal){ result.push("half"); } while(result.length <5){ result.push("off"); } return result;
},
樣式
.star-item{ display: inline-block; background-repeat:no-repeat ; width: 0.09rem; height: 0.09rem; /*margin-right: 0.rem;*/ background-size:100% ; } .star-item.on{ background-image: url("../../images/_20171226164030.png"); } .star-item.half{ background-image: url("../../images/0171226164041.png"); } .star-item.off{ background-image: url("../../images/171226164044.png"); }