vue实现图片切换效果

本文实例为大家分享了vue实现图片切换效果的具体代码，供大家参考，具体内容如下

1）v-if/v-show

二者都可以实现让元素隐藏和显示。但是实现原理不同：
v-if 是通过将元素从dom树中移除和添加来实现元素的隐藏和显示效果。
v-show 是通过修改元素的displace值来实现元素的隐藏和显示效果。

2）v-bind

v-bind可以对元素的属性值进行修改。
基于这些背景知识，下面来实现图片切换实例。

功能需求

1）点击左边按钮，显示前一张图片；如果图片是第一张，则隐藏该按钮
2）点击右边按钮，显示后一张图片；如果图片是最后一张，则隐藏该按钮

实现代码

    
 
  < 

 > 

效果

1）显示第一张图片时

2）显示最后一张图片时

3）显示其他张图片时

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。