Vue实现简单图片切换效果
本文实例为大家分享了Vue实现简单图片切换的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> <title>图片切换</title> <style type='text/css'>*{ padding: 0; margin: 0;}#app{ position: absolute; width: 100px; height: 100px; top: 100px; left: 400px;} #left{ position: relative; top:-240px; left: -45px; font-size: 50px; } #right{ position: relative; top: -300px; left: 595px; font-size: 50px; } a{ color: black; text-decoration: none; } </style></head><body> <div id='app'><!-- 要轮询的图片 --> <img :src='https://www.haobala.com/bcjs/imgArr[index]'/> <!-- 左箭头 --> <a href='javascript:void(0)' @click='prev' v-show='index!=0'>《</a> <!-- 右箭头 --> <a href='javascript:void(0)' @click='next' v-show='index<imgArr.length-1'>》</a> </div> <script>var app = new Vue({ el: '#app', data: {imgArr:[ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg',],index: 0, }, methods: {prev: function(){ this.index--;},next: function(){ this.index++;}, }}) </script></body></html>
总结：
列表数据使用数组保存； v-bind指令可以设置元素属性，如src ； v-show和v-if都可以切换元素的显示状态，但频繁切换推荐使用v-show以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备