vue 星级评论

<template>
  <div id="shoplist">
      <div v-for="(item,index) in 5" :key="index">
        <input type="radio"  :value="index+1" v-model="inputdata" />
        <img src="../../../static/img/star2.png"  v-if="inputdata>=(index+1)"/>
        <img src="../../../static/img/star1.png" v-else/>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputdata:0//设置默认点亮星数
      }
    },
    methods: {},
    watch: {
      inputdata(value) {
        console.log(value)
      }
    }
  }

</script>

<style>
  #shoplist {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

   #shoplist img {
    width: 40px;
    height: 40px;
    display: inline-block
  }

  #shoplist div {
    position: relative;
  }

   #shoplist div input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

</style>