注: href=“javascript:void(0);” 这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数。javascript:是伪协议,表示url的内容通过javascript执行。void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="d1">
<a href="javascript:void(0)" @click="prev" v-show="index>0">上一张</a>
<button @click="prev" v-show="index>0">上一张</button>
<img :src="photoArr[index]" >
<a href="javascript:void(0)" @click="next" v-show="index<photoArr.length-1">下一张</a>
<button @click="next" v-show="index<photoArr.length-1">下一张</button>
</div>
<script>
new Vue({
el:"#d1",
data:{
index:1,
photoArr:["photos/a.jpg","photos/b.jpg"]
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
</body>