vue實現簡單的星級評分組件源碼

這篇文章主要介紹了vue星級評分組件源碼,代碼簡單易懂非常不錯，具有一定的參考借鑑價值，需要的朋友可以參考下

vue星級評分組件源碼，具體代碼如下所示：

<!--自定義組件-->
<template>
  <!--結構層-->
    <div id="star">
      <span v-for="classn in starArrs" :class="classn" class="staritem"></span>
      <!--<span class="staritem onstar"></span>
      <span class="staritem onstar"></span>
      <span class="staritem halfstar"></span>
      <span class="staritem offstar"></span>-->
      <!--根據傳遞過來的分數得到對應的星星
        4.7   四顆半星
        1個位數代表的是全裏亮，
        2，當分數大於等於0.5 是一個半星
        3.當全星和半星不足五個的時候，剩下的都是灰色的星星
      -->
    </div>
</template>
<script>
// 行爲
  export default{
    props:['score'],
    created(){
      console.log("子組件");
    },
    mounted(){
      console.log("打印傳遞的分數");
    },
    computed:{
      starArrs(){
        var starArr=[];  //3.9
//       全星星的個數
        let onstar = parseInt(this.score);
        console.log(onstar)
//       是否有半星
        let halfStar = Math.round(this.score-onstar)?true:false;
//       有多少課灰色的星星
        for (var i=0;i<onstar;i++) {
          starArr.push('onstar')         
        }
        if(halfStar){
          starArr.push('halfstar')          
        }
        while(starArr.length<5){
          starArr.push('offstar') 
        }
        return starArr;
      }
    }
  }
</script>
<style scoped="scoped">
  /*獨立作用域的樣式*/
  .staritem{
    display: inline-block; 
    width: 0.37037rem;
    height: 0.37037rem;
  }
  /*全星星*/
  .onstar{
    background: url(./[email protected]);
    background-size: 0.37037rem;  
  }
  .halfstar{
    background: url('./[email protected]');
  }
  .offstar{
    background: url('./[email protected]');
  }
</style>

背景圖

[email protected] 

[email protected]  

[email protected]

總結

以上所述是小編給大家介紹的vue實現簡單的星級評分組件源碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！