vue 星级评分 ——简单版

此星级评分超级简单 好用高效 适用于多种场景 三目运算

代码如下
html 部分

// An highlighted block
<template>
  <div>
    <div style="display: inline-block"
      v-for="(num,index) in 6" :key="index" @click="handle(index)">
      <img :src='data>=index?ling:bu' alt="">
    </div>
  </div>
</template>

js 部分

// An highlighted block
<script>
  import img from '../assets/xingX.png'
  import imgB from '../assets/xingB.png'
  export default {
    data() {
      return {
        data:3,
        bu:imgB,
        ling:img
      }
    },
    methods:{
      handle(val){
        console.log(val)
        this.data = -1
        this.data = val
      }
    }
  }
</script>

效果如下：