mpvue 星星評價

商品的評價在每個商品中都會有展示，這種必定要寫成組件的形式

1.創建組件

2.引入組件

哪裏使用哪裏引入

import Score from "@/components/Score.vue" //引入組件

  components:{
    Score
  },

3.使用並傳參

這是的參數是1-10的數字，傳到組件中進行處理

   <Score :score ="namedata.score"></Score>

方法一

使用這種方法如果是偶數或者滿星的 情況下，for循環會出現空轉報錯的情況，不影響效果。

<template>
    <div>
        <img v-for="(scoreFloor,key) in scoreFloor" :key="key" src="../../static/images/b-star.png" />
        <img v-for="(scoreCeil,key) in scoreCeil" :key="key" src="../../static/images/b-half.png" />
        <img v-for="(scoreSurplus,key) in scoreSurplus" :key="key" src="../../static/images/gray-star.png"/>
    </div>
</template>
<script>
export default {
    name:"Score",
    props:["score"],//接收數據
    computed:{
        scoreFloor(){
            let resData = parseInt(this.score) / 2
            return Math.floor(resData)//整數星星的個數 
        },
        scoreCeil(){
            return parseInt(this.score) % 2  //取餘半數星星
        },   
        scoreSurplus(){
            return 5-this.scoreFloor-this.scoreCeil  //剩餘
        }
    }
}
</script>
<style scoped>
    img{
        width: 20rpx;
        height: 20rpx;
    }
</style>

方法二

坑點注意：mpvue圖片加載src前使用：冒號 等號後面不能使用引號

<template>
    <div>
        <div v-for="(items,key) in start" :key="key">
            <img v-for="(item,keys) in items.numb" :key="keys" :src=items.urls>
        </div>
    </div>
</template>

<script>

export default {
    name:"Score",
    props:["score"],
    data() {
        return {
            start:{}
        }
    },
    created() {
        this.start={
            full:{
                numb:Math.floor(this.score/2),
                urls:'../../static/images/b-star.png'
            },
            half:{
                numb:this.score%2,
                urls:'../../static/images/b-half.png'
            },
            none:{
                numb:5-Math.ceil(this.score/2),
                urls:'../../static/images/gray-star.png'
            }
        }        
    }
}
</script>
<style scoped>
    img{
        width: 20rpx;
        height: 20rpx;
    }
    
</style>