1. 程式人生 > >vue 五星評價外掛

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;
}