vue 五星評價外掛
阿新 • • 發佈:2018-11-06
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; }