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>