网站正在建设模板,wordpress 自定义 类别,建设通电脑版,石家庄网页网站制作点击切换图片的本质#xff0c;其实修改的是img标签的src属性。 图片的地址有很多个#xff0c;在js当中通过数组来保存多个数据#xff0c;数组的取值结合索引#xff0c;根据索引可以来判断是否是第一张还是最后一张。
图片的变化本质是src属性被修改了#xff0c;属性…点击切换图片的本质其实修改的是img标签的src属性。 图片的地址有很多个在js当中通过数组来保存多个数据数组的取值结合索引根据索引可以来判断是否是第一张还是最后一张。
图片的变化本质是src属性被修改了属性的修改使用v-bind指令。
a标签在点击的时候要执行逻辑那么事件绑定是v-on在第一张和最后一张图片隐藏某个a标签因为切换的比较频繁考虑到性能问题使用v-show指令。 首先要定义图片数组在data当中定义data数组将地址存储进去。
接着添加图片索引如果是从数组第一个获取的话那么值是0。
然后使用v-bind指令将地址和img的src属性绑定获取的方式其实就是数组索引
点击上一张和下一张图片本质是修改了索引的值这部分的逻辑写在methods中
下一张可以取名为pre next逻辑简单只需要去递增和递减索引就行了
左右箭头的显示条件略有不同一个是不为第一张索引不为0就行了。如果不为最后一张只需要判断所应的长度比数组小指令使用v-show。 左边的按钮只需要索引不为0就可以使用了为0相当于第一张。右边按钮只需要比数组的长度小就可以显示了。
!DOCTYPE html
html
headmeta charsetUTF-8title首页/titlelink href typetext/css relstylesheet/script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptstyle typetext/css/style
/headbody
div idapp!--现在是基于数据来生成src的属性--button typebutton clickpre v-showindex! 0上一张/buttonbutton typebutton clicknext v-showindeximgArr.length-1下一张/buttonimg :srcimgArr[index] alt
/divscript typetext/javascript new Vue({ el: #app, data:{ imgArr:[./1.jpg,./2.jpg,./3.jpg,],index: 0,},methods:{pre:function(){this.index--;},next:function(){this.index;}}})/script/body
/html
这里使用v-if也是可以的。v-if是直接将元素从dom树里面移除性能的消耗而言会大一些不建议使用。
