实现的功能:
- 点击上一张 下一张按钮实现图片上一张 下一张的图片切换 ;
- 当图片显示为第一张时,上一张按钮消失,但图片为最后一张时 下一张按钮消失;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } #app { width: 1000px; margin: 0 auto; font-size: 0; } img { width:100%; height: 530px; } a { display: inline-block; font-size: 20px; width: 100px; height: 50px; line-height: 50px; text-align: center; text-decoration: none; background-color: black; } .left { float: left; } .right { float: right; } </style> </head> <body> <div id="app"> <img :src="imgSrc[index]" alt=""> <a class="left" href="#" @click="li" v-show="index!=0">上一张</a> <a class="right" href="#" @click="ri" v-show="index < imgSrc.length - 1">下一张</a> </div> <script src="../../js/vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ imgSrc:[ "../../img/1.jpg", "../../img/High Sierra.jpg", "../../img/Sierra.jpg" ], index: 0, }, methods:{ li:function(){ this.index--; }, ri:function(){ this.index++; } } }); </script> </body> </html>