1. 程式人生 > >vue 五星評分及資料為遍歷

vue 五星評分及資料為遍歷

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"); }