<!--自定義組件--><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(./star24_on@2x.png);    background-size: 0.37037rem;    }  .halfstar{    background: url('./star24_half@2x.png');  }  .offstar{    background: url('./star24_off@2x.png');  }</style>