vue.js怎样写一个轮播图

vue.js写一个轮播图的方法：首先写出整体的框架；然后定义轮播图的数组，上传本地图片；最后通过改变自定义变量nowindex来改变轮播图的状态。

本教程操作环境：windows10系统、vue2.9，本文适用于所有品牌的电脑。

【相关文章推荐：vue.js】

vue.js写一个轮播图的方法：

说下简单的思路，图片的轮播用v-if或者v-show来代替原来的Js滑动，过度效果用transition可简单实现，注意，滑动过程中是能看见两张图的，所以要用两个transition。

（1）先写出整体的框架

根据imgArray这个照片的数组渲染小圆点的数量，为span绑定on为小圆点点亮的状态，照片的显示隐藏通过自定义变量ifshow来显示，nowindex则控制轮播对应的照片。

（2）轮播图的数组，如果是本地的图片，而且不放在static文件下的，请用require圈上路径，否则路径会报错。如果是从后台服务器获取的则不需要。

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

（3）主要就是通过改变自定义变量nowindex来改变轮播图的状态，要注意滑动的过程是能看见两张图的，所以在goto函数中设置了一个短暂的定时器，让一张显示另一张隐藏，分别加上不同的过度效果。

到这里，这个简单的轮播图就到此结束了。

相关免费学习推荐：JavaScript（视频）

以上是vue.js怎样写一个轮播图的详细内容。更多信息请关注PHP中文网其他相关文章！