vue 星级评论

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37465264/article/details/82428425
<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>

 

展开阅读全文

没有更多推荐了,返回首页