利用v-for 循环遍历出来的数据,通常会配合点击事件去完成一些样式的渲染,仅仅作为个人记录
<template>
<div>
<div :style="imgSelect.style" v-for="item in imgSelect.list" class="img-wrap">
<img @click="imgClick(item)" :data-id="item.id" :src="item.src" alt="" />
<i
v-show="item.index == '-1' ? true : false"
style="position: absolute;top: 0;right: 0;color: #409EFF;">
</i>
</div>
</div>
</template>
<script>
export default {
name: "imgSelect",
props: {
imgSelect: {
type: Object
}
},
data() {
return {};
},
mounted() {
console.log(this.imgSelect);
},
methods: {
imgClick(item) {
if (item.index == undefined) {
//动态的将当前数据添加一条数据以便控制 i 标签的显示和隐藏
this.$set(item, "index", "-1");
} else {
this.$delete(item, "index", "-1");
}
}
}
};
</script>