vue点击按钮怎么跳转图片_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

}.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%;

}

这个是我写的样式;