本文实例为大家分享了Vue实现简单图片切换的具体代码,供大家参考,具体内容如下
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < 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 href = "javascript:void(0)" id = "left" @ click = "prev" v-show = "index!=0" >《</ a > <!-- 右箭头 --> < a 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/215890/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)