标签：dex col images float web $set 变量 .com spl
一、效果
二、Html
<div class="commentTitle clearfix"> <div class="comment floatL">服务态度</div> <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> </div>
三、JS
starArr1: [{imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}, {imgSrc: ‘star1.png‘}] // 变量
starClick1 (index) { this.starArr1.forEach((element, i) => { this.$set(element, ‘imgSrc‘, ‘star1.png‘) if (i <= index) { this.$set(element, ‘imgSrc‘, ‘star2.png‘) } }) this.commentScore = index + 1 // 评价成绩 }
四、css
.commentTitle { height: 1.1rem; line-height: 1.1rem; font-size: .32rem; color: #333333; padding-top: .4rem; } .comment { line-height: .7rem; padding-right: 10px; } .starBox { display: flex; display: -webkit-flex; line-height: .9rem; } .star img { width: .8rem; height: .4rem; }
标签：dex col images float web $set 变量 .com spl
原文地址：https://www.cnblogs.com/candy-Yao/p/9951013.html
