使用v-for循环展示多张图片,并且标记选中的图片
因为项目需求,需要使用v-for展示多张图片,并且供用户选择其中一张,当用户选中一张图片的时候需要改变该图片的样式,来反映用户的选择。由于刚学vue,踩了好多坑,因此作以下记录,以时刻提醒自己:1.一开始我打算将图片嵌入button中,但是这样存在的问题,由于是用v-for循环列出的一系列button,每一个button的id或者class名字都是一样的,就算能够知道用户点击图片的in...
·
因为项目需求,需要使用v-for展示多张图片,并且供用户选择其中一张,当用户选中一张图片的时候需要改变该图片的样式,来反映用户的选择。由于刚学vue,踩了好多坑,因此作以下记录,以时刻提醒自己:
1.一开始我打算将图片嵌入button中,但是这样存在的问题,由于是用v-for循环列出的一系列button,每一个button的id或者class名字都是一样的,就算能够知道用户点击图片的index,也无法修改该button的样式。(或许还是因为目前自己的积累有限,如果以后知道方法了要及时修改);
2.经过进一步的百度,发现了一些动态修改dom样式的参考博客如下,因此可以考虑动态修改div的样式来反映用户的选择。
https://blog.csdn.net/u013243347/article/details/81169515
https://www.cnblogs.com/sophie_wang/p/7903905.html
粗略的代码如下:
<template>
<div class="index" style="padding-top:300px">
<Row :gutter="16">
<Col span="4" :key = item v-for="(item,index) in imgList">
<div ref="btn" @click="handleClick(index)">
<Button>
<img :src=item.url style="width:200px" /><br>
{{index+1}}
</Button>
</div>
</Col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
imgList:[
{
name: "1",
url: "src/images/1.jpg"
},
{
name: "2",
url: "src/images/2.jpg"
},
{
name: "1",
url: "src/images/1.jpg"
},
{
name: "3",
url: "src/images/3.jpg"
},
{
name: "1",
url: "src/images/1.jpg"
},
{
name: "3",
url: "src/images/3.jpg"
},
{
name: "1",
url: "src/images/1.jpg"
},
{
name: "2",
url: "src/images/2.jpg"
},
{
name: "1",
url: "src/images/1.jpg"
},
{
name: "1",
url: "src/images/1.jpg"
}
]
}
},
methods: {
handleClick(index){
// console.log(item);
console.log(index);
for(var i=0;i<this.imgList.length;i++){
if(i!==index){
this.$refs.btn[i].style.background="";
}else{
this.$refs.btn[i].style.background="blue";
}
}
}
}
}
</script>
3.这样能够反映用户的选择,但是个人感觉还有更好的办法,以后务必补充!!!
更多推荐
已为社区贡献22条内容
所有评论(0)