一个目录中有多张图片,要想全部显示在页面,使用循环v-for方法比较方便快捷,也可以通过函数改变isShow值,从而达到控制某张图片的显示与隐藏
<div v-for="(item, index) in imgList" :key="index">
<span v-if="item.isShow">
<img :src=item.imgSrc alt="" height="100%">
</span>
</div>
data () {
return {
imgList: [
{
imgSrc: require('./img/0.png'),
isShow: true
}
]
};
},
created () {
// 将目录中的图片全部放进图片数组中
for (let i = 1; i < 30; i++) {
this.imgList.push({
imgSrc: require(`./img/${i}.png`),
isShow: true
});
}
}