<div class="content" v-for="(item,ii) in date.date" :key='ii'>
<div>{{ii}}</div>
<div class="imglist">
<div class="image" v-for="(itemson,a) in item" :key='a'>
<img :src="'http://test.admin.tc.qianji.org.cn/storage/'+itemson.photo_url"
@click="show">
<div class="in" v-if="inde">
<span>X</span>
<span>入档</span>
</div>
</div>
</div>
</div>
点击一个,显示一个,而不是一下子都显示出来
1、在data中定义一个当前下标 currIndex;
2、图片点击show 方法内将index 赋值给currIndex
3、在图片下方需要显示的div上加判断 当前下标是否等于index
<div class="content" v-for="(item,ii) in date.date" :key='ii'>
<div>{{ii}}</div>
<div class="imglist">
<div class="image" v-for="(itemson,a) in item" :key='a'>
<img :src="'http://test.admin.tc.qianji.org.cn/storage/'+itemson.photo_url"
@click="show">
<div class="in" v-if="currIndex==index">
<span>X</span>
<span>入档</span>
</div>
</div>
</div>
</div>
你是循环出来的,你直接给循环数组对象添加一个key 用来控制当前图片是否隐藏,然后点击让其变更状态即可
img
绑定自定义属性data-src
,src
放个默认图片,点击哪个,将src
换成data-src
的地址