vue 五星评价插件

html:

<div class="starBox" ref="star1">
    <div class="star" v-for="(item,index) in starArr1" :key="index" @click="starClick1(index)">
      <img :src="'../../static/images/'+item.imgSrc">
    </div>
 </div>

js:

export default {
  data () {
    return {
      starArr1: [{imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}]
    }
  },
  methods: {
    starClick1 (index) {
      this.starArr1.forEach((element, i) => {
        this.$set(element, 'imgSrc', 'star1.png')
        if (i <= index) {
          this.$set(element, 'imgSrc', 'star2.png')
        }
      })
      this.commentScore[0] = index + 1
    }
 }
}

css:

.starBox {
  display: flex;
  display: -webkit-flex;
}
.starActive {
  color: red;
}
.star img {
  width: 40px;
  height: 20px;
}

 

转载于:https://www.cnblogs.com/candy-Yao/p/9914626.html

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值