心事如莲,心静如水。驾一叶轻舟,吹一支长笛,自池塘深处,揽一朵莲花入怀,似红粉佳人,晶莹剔透,亭亭玉立,娇俏动人,喜一分,爱一分,怜一分,朵朵幽香入心田,丝丝柔情潜心底。
本文实例为大家分享了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="imgArr[index]"/> <!-- 左箭头 --> <a rel="nofollow noopener noreferrer" href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a> <!-- 右箭头 --> <a rel="nofollow noopener noreferrer" href="javascript:void(0)" id="right" @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
到此这篇关于Vue如何实现简单图片切换效果就介绍到这了。这个世界上从来没有一蹴而就的成功,如果没有踏实的努力,没有点滴的积累,再好的运气降落到你头上时,你也没有接住它的实力。早安!与您共勉,人生需要一步一个脚印!更多相关Vue如何实现简单图片切换效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!