v-for循环中有很多列表,当我点击其中一个列表后,出现图片在该列表中,同时该列表排在所有列表的最前面,剩下的列表排在后面
时间: 2024-05-10 15:14:06 浏览: 27
你可以通过以下步骤实现你的需求:
1. 在每个列表项中添加一个点击事件处理函数,当用户点击该列表项时,将该列表项的数据存储到一个数组中,并在该列表项中添加一个样式,表示该列表项被选中了。
2. 在选中的列表项上添加一个图片元素,将该列表项所对应的图片显示出来。
3. 使用 Vue.js 中的 v-for 指令渲染所有的列表项,并使用 v-if 指令判断该列表项是否被选中,如果被选中,则将其放在所有列表项的最前面。
下面是一个简单的示例代码,你可以根据自己的需求进行修改:
```
<template>
<div>
<div class="list" v-for="item in items" :key="item.id" :class="{ active: item.active }" @click="handleClick(item)">
<span>{{ item.name }}</span>
<img v-if="item.active" :src="item.image" alt="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '列表1', image: 'image1.jpg', active: false },
{ id: 2, name: '列表2', image: 'image2.jpg', active: false },
{ id: 3, name: '列表3', image: 'image3.jpg', active: false },
{ id: 4, name: '列表4', image: 'image4.jpg', active: false },
],
selectedItems: [],
};
},
methods: {
handleClick(item) {
this.selectedItems.unshift(item);
item.active = true;
},
},
};
</script>
<style>
.list {
display: flex;
align-items: center;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.list.active {
background-color: #ccc;
}
.list img {
margin-left: 20px;
width: 100px;
height: 100px;
}
</style>
```