代码：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app { border: 1px solid red; left: 50%; top: 50%; 410px; height: 235px; } .bg { position: relative; top: 5px; left: 5px; } .left { position: absolute; top: 104px; left: 15px; } .lbg { height: 80px; 30px; opacity: 0.8; } .right { position: absolute; top: 104px; left: 382px; } .rbg { height: 80px; 30px; opacity: 0.8; } </style> </head> <body> <div id="app"> <img :src="imgurl[index]" alt="" class="bg"> <span> <a href="#" class="left" @click="prev" v-show="index!=0"> <img src=" ./img/left.jpg " alt=" " class="lbg "> </a> </span> <a href="# " class="right " @click="next " v-show="index<imgurl.length-1"> <img src="./img/right.jpg " alt=" " class="rbg "> </a> </div> <script> var app = new Vue({ el: '#app', data: { imgurl: ["./img/img1.jpg ", "./img/img2.jpg ", "./img/img3.jpg ", "./img/img4.jpg "], index: 0, }, methods: { prev: function () { this.index -= 1; }, next: function () { this.index += 1; } }, }) </script> </body> </html>
结果：
最开始显示第一章，然后index=0，不会显示左箭头，点击右箭头：
index=1，显示左箭头，一直点击到显示最后一张：
不显示右箭头了。