效果展示
默认显示第一张图片，当图片为第一张时，隐藏左侧（上一张）按钮
点击左侧/右侧按钮来切换图片（上一张/下一张）
当显示到最后一张图片时，隐藏右侧（下一张）按钮
image.png
代码
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片切换</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<img :src="'./img/'+pics[order]">
<div class="button" id="left" v-show="order!=0" @click="btnLeft"><</div>
<div class="button" id="right" v-show="order<pics.length-1" @click="btnRight">></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
pics:['img1.png', 'img2.jpg', 'img3.jpg', 'img4.png'],
order: 0,
},
methods:{
btnLeft:function(){
this.order--;
},
btnRight:function(){
this.order++;
}
}
})
</script>
</body>
</html>
css部分
#app{
position: relative;
margin: 50px auto;
padding: 0;
width: 500px;
height: 300px;
}
#app img{
width: 500px;
height: 300px;
}
.button{
position: absolute;
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
top: 50%;
margin-top: -25px;
border: 1px solid #fff;
opacity: 0.3;
cursor: pointer;
color: #fff;
background: black;
}
#right{
left: 100%;
margin-left: -30px;
}
原理讲解
<script>
let app = new Vue({
el: '#app',
data: {
pics:['img1.png', 'img2.jpg', 'img3.jpg', 'img4.png'],
order: 0,
},
methods:{
btnLeft:function(){
this.order--;
},
btnRight:function(){
this.order++;
}
}
})
</script>
data中的pics是存放图片的数组，这里存放的是文件名（含后缀），order即为数组下标，用来索引图片，默认值为0（显示第一张）
methods中的两个方式分别为绑定在左右按钮的上一张，下一张的功能函数，这里通过控制order的增减来切换图片。
注意：这里之所以不用判定order是否越界（即出现索引小于0，或超出数组长度的情况），是因为在设计按钮的时候控制了按钮的显现，即当显示第一张或最后一张图片时，左/右侧按钮不显示，按钮不显示，当然也不会触发点击事件，自然也不会出现索引越界的情况。
使用x-show指令来控制按钮的显现
<div class="button" id="left" v-show="order!=0" @click="btnLeft"><</div>
<div class="button" id="right" v-show="order<pics.length-1" @click="btnRight">></div>
