Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点
这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头;
左箭头也有了,然后我们继续点击右箭头;
右箭头没有了,只剩下了左箭头,
以上就全部的效果图了;
分析一下,如何做到这个功能:
1.先不要去考虑样式(虽然确实丑,但景色还是不错的对吧),我们一般都是怎样存放多条数据的呢?
2.我们应该如何去隐藏左箭头按钮或者右箭头按钮呢?
3.vue指令中隐藏的指令有哪些?有什么不同呢?
好,第一,我们一般存放数据都是采用数组的方式,方便存放多条数据,因为数组有长度和索引,方便查找;
第二 ,当图片是第一张时,我们隐藏左箭头按钮,因为已经是第一张了,不能再继续点击了.当图片为最后一张时,隐藏右箭头,因为已经是最后一张了,当图片不是一张和最后一张时,左右箭头都显示;
第三.vue指令中 有两个是用来隐藏和显示的,1.v-show 2.v-if
它们的区别:v-show是操作dom节点的属性(display:none) 而v-if则比较狠,它直接删除了该dom节点,需要显示的时候再加过来;
相对于v-show来说 v-if比较消耗资源;较为频繁的隐藏显示,推荐使用v-show;至于v-if则视情况而定
上代码:
第一步,仍然是先导入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style> .top{ border: 1px solid ; width: 600px; height: 450px; margin-left: 30%; margin-top: 5%; } .img{ width: 600px; height: 450px; } .left{ width: 45px; height: 45px; } #left{ width: 45px; height: 45px; background-color:red ; margin-left: 30%; margin-top: -25%; } #right{ width: 45px; height: 45px; margin-left: 66.5%; margin-top: -3.65%; } </style>
这个是我写的样式;
<body> <div id="app"> <div class="top"> <img class="img" :src="imgArr[index]" alt=""> </div> <div id="left"> <a href="javascript:void(0)" @click="left" v-show='index!=0'> <img class="left" src="./img/left.jpg"> </a> </div> <div id="right"> <a href="javascript:void(0)" @click="right" v-show='index<imgArr.length-1'> <img class="left" src="./img/right.jpg"> </a> </div> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ imgArr:[ "./img/0.jpg", "./img/1.jpg", "./img/2.jpg", ], index:0 }, methods:{ left:function(){ this.index--; }, right:function(){ this.index++; console.log(this.index) } } }) </script>
详细解释一下,我们可以看到 在div img的src 路径是在data中写的,所以在vue中我们切换图片操作的是数据;
我们在data中创建一个数组imgArr[],在数据中添加进去数据,也就是图片;然后在创建一个index(下标)=0;
这样,我们就可以将<img class="img" src="./img/0.jpg" alt=""> 中的src进行改变了,
将src="./img/0.jpg" 改成 :src="imgArr[index]"
注意区别: 改之后src前面有一个":",这其实是v-bind:的缩写,所以改之后就是vue的指令了;
这时,我们运行就可以看到第一张图片显示出来了;
然后我们再去写左右箭头,写两个方法吧,"left"和"right";
逻辑很清晰,当我们点击左箭头按钮时,就将下标index-1.同理,点击右键头就+1;
如上图我们写那样 this.index++ this.index--;
写好这些以后我们发现就可以切换图片了,但是,当index为负数时,就不会出现图片了,这时我们就要给添加一个限制了
逻辑也很简单,分析一下,我们采用的数组存数据,那么我们可以以数组下标为限制 那么我们在左箭头按钮上就写vue指令 v-show="index!=0"
意思是当index不等0的时候显示,当index=0时候隐藏; 左箭头写好了;
那么右键头,我们可以采取与数组的长度作比较; 如: index<imgArr.length -1,同理也写在v-show中;
这样当index下标等于数组长度-1时就会隐藏,这样到了最后一张就会隐藏了;
