用vue写星级评分效果

首先新建一个vue组件,名叫star.vue

star.vue的代码

<template>
  <div>
    <ul class="star">
      <li v-for="item in chance" :class="item"></li>   <!--根据数据循环创建li标签-->
    </ul>
  </div>
</template>

<script>
  export default {
    name: "star",
    data() {
      return {
        // num:5,
        // stor:3.5,
        // star: ["on", "on", "on", "off", "off"]  
      }
    },
    props:["num","stor"], // 接受参数
    computed: {
      chance(){
        // 创建一个数组，让数组里的每个值都是off，好进行下面的比较。
        let arr=[];
        while (this.num>arr.length){
          arr.push("off")
        }
        //向下取整数,数组中的Array.map() 方法返回一个新数组，此方法可以以一个函数为参数，循环数组的每一个元素，函数将数组中的元素接收为单个参数
        //判断整数大于下标值，大于的话返回on,因为数组的下标从0开始
        // 多出来的小数(res)乘10,大于等于5，使定义的新数组的num变成half，因为数组的下标从0开始。
        let  num=Math.floor(this.stor)
        let  res=(this.stor-num)*10
        let  newstar=arr.map((item,index)=>{
          if (num>index){
            return "on"
          } else {
            return "off"
          }
        })
        if (res>=5){
          newstar[num]="half"
        }
        return newstar //返回newstar数组
      }

    },
  }
</script>

<style scoped>
  .star li {
    width: 30px;
    height: 30px;
    float: left;
    list-style: none;
    background: url("./img/star36_off@3x.png") no-repeat center/cover;
  }
  .star .on{
    background-image: url("./img/star36_on@3x.png");
  }
  .star .half{
    background-image:url("./img/star36_half@3x.png") ;
  }
</style>

在要用的组件中导入进去，注册一个标签

import star from '@/components/star/star.vue'
export default {
  name: 'App',
  components:{
    star
  }
}

标签绑定num,stor

<template>
  <div id="app">
    <star :num="5" :stor="4.4"></star>
  </div>
</template>