Vue動態怎么實現評分效果

這篇文章主要介紹“Vue動態怎么實現評分效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue動態怎么實現評分效果”文章能幫助大家解決問題。

1.圖片分為三種

on:half: off

<style>
  .star{
    font-size: 0;
  }
  .star-item{
    display: inline-block;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 22px;
    background-size: 100%;
  }
  .star-item.on{
    background-image: url(img/on.png);
  }
  .star-item.half{
    background-image: url(img/half.png);
  }
  .star-item.off{
    background-image: url(img/off.png);
  }
</style>

<div id="app">
  <ul class="star">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" track-by="index"></span><!--性能優化 track-by 數據不改變時不會重新渲染-->
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
  　data:{
    score: 4
  },
   computed:{ //計算屬性
    itemClasses(){
      let result = [];
      let score = Math.floor(this.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;
    }
  }
})
</script>

關于“Vue動態怎么實現評分效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。