vue评价星星加笑脸（娃娃头像）

直接上代码vue：

<view class="flex align-center justify-between margin-t-30">
    <view v-for="item in chooseList" :key="item.key" @click="imageHandler(item.key)" class="width-130">
        <view class="relative">
            <view>
                <view class="icon-image absolute" :class="item.selected?'visible':'hidden'">
                    <u-image :src="item.selectedImg" :showLoading="false"></u-image>
                </view>
                <view class="icon-image absolute" :class="item.selected?'hidden':'visible'">
                    <u-image :src="item.img" :showLoading="false"></u-image>
                </view>
            </view>
            <view class="absolute text-absolute">{{ item.text }}</view>
        </view>
    </view>
</view>

export default {
        data()
        {
            return {
                chooseList: [
                    {
                        key: "acclaim",
                        text: "好评",
                        img: this.$static + "/common/images/acclaimUnchecked.png",
                        selectedImg: this.$static + "/common/images/acclaim.png",
                        selected: true
                    },
                    {
                        key: "badReviews",
                        text: "中评",
                        img: this.$static + "/common/images/badReviewsUnchecked.png",
                        selectedImg: this.$static + "/common/images/badReviews.png",
                        selected: false
                    },
                    {
                        key: "mediumRating",
                        text: "差评",
                        img: this.$static + "/common/images/mediumRatingUnchecked.png",
                        selectedImg: this.$static + "/common/images/mediumRating.png",
                        selected: false
                    }
                ],//商品评价图标
                chooseOne: ""//商品评价图标选中项
                }
         }，
         methods: {
            imageHandler(key)
            {
                this.chooseList.forEach(item =>
                {
                    if (item.key === key)
                    {
                        item.selected = true;
                        this.chooseOne = key;
                    }
                    else
                    {
                        item.selected = false;
                    }
                });
            }
       	}
   	}

<style  scoped>
			.flex
            {
                display: flex;
            }

            .align-center
            {
                align-items: center;
            }

            .justify-between
            {
                justify-content: space-between;
            }
            .margin-t-30
            {
                margin-top: 30rpx;
            }
 			.width-130
            {
                width: 130rpx;
            }
             .relative
            {
                position: relative;
            }

            .absolute
            {
                position: absolute;
            }
			 .icon-image
              {
                  width: 60rpx;
                   height: 60rpx;
               }
                .hidden
			     {
			         visibility: hidden;
			      }

		        .visible
		        {
		            visibility: visible;
		        }
		        .text-absolute
		         {
		              right: 0;
		               top: 20rpx;
		          }
</style>