实现思路:
先设置一个图片选中后的样式,样式名为selected,然后动态添加该样式名字
将后端传回来的数据列表每一项添加一个标记isChoose,判断是否存在该标记
点击同一图片,第一次则加上标记,选中样式生效,并添加到数组列表中
再次点击则去掉标记,选中样式失效,并在数组列表中删除该项
示例:
<view v-for="(item,index) in equipmentList" :key="index" @click="changeList(item)" :class="{'selected':item.isChoose}">
<view style="text-align: center;">{{item.name}}</view>
<image :src="item.sampleImage" class="imageCardList"></image>
</view>
changeList (item) {
if (!item.isChoose) {
item.isChoose = true;
this.selectedList.push(item.id)
} else {
item.isChoose = false;
let index = this.selectedList.indexOf(item.id);
if (index > -1) {
this.selectedList.splice(index, 1);
}
}
},