图片的切换案例练习:
<div id="mask">
<img :src="imgArr[index]" alt=""/>
<a href="javascript:void(0)" @click="prev" alt="" v-show="index>0">《</a>
<!-- 这里要注意href="javascript:void(0)"表示这是一个死链接,不进行跳转,无反应。
如果href=""空时,则表示单击链接重新载入页面,相当于刷新页面。
所以如果想要 <img :src="imgArr[index]" alt=""/> 中的index值累加的话,必须使用第一个。
-->
<a href="javascript:void(0)" @click="next" alt="" v-show="index<imgArr.length-1"> 》</a>
</div>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"image/01.jpg",
"image/02.jpg",
"image/03.jpg",
"image/04.jpg",
],
index:0
},
methods: {
prev:function(){
this.index=this.index-1;
},
next:function(){
this.index=this.index+1;
}
}
})
总结:👇