vue.js能做轮播图，其实现方法：首先写出整体的框架；然后根据imgArray照片的数组渲染小圆点的数量；接着将span绑定on为小圆点点亮的状态；最后通过自定义变量ifshow来显示图片的显示隐藏，并设置nowindex来控制轮播即可。
本教程操作环境：windows7系统、vue2.0版，该方法适用于所有品牌电脑。
相关推荐：《vue.js教程》
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录
（1）先写出整体的框架
<template><div class="slide-show"><div class="slide-img"><transition name="slide-trans" ><img v-if='ifshow' :src='imgArray[nowindex]'></transition><transition name="slide-trans-old"> <img v-if="!ifshow" :src="imgArray[nowindex]"> </transition><ul class="slide-pages"><li v-for="(item,index) in imgArray"><span :class="{on :index===nowindex}" @click="goto(index)"></span></li></ul></div></div></template>根据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函数中设置了一个短暂的定时器，让一张显示另一张隐藏，分别加上不同的过度效果。
<script type="text/javascript">export default {props:{imgArray:{type:Array,default:[]}},data() {return {ifshow:true,nowindex:0,}},created(){this.timerun()},computed:{nextindex(){if(this.nowindex === this.imgArray.length -1){return 0}else{return this.nowindex + 1}}},methods: {goto(index){let that = this;this.ifshow = false;setTimeout(function(){that.ifshow = true;that.nowindex = index;},100) },timerun(){ let that = this; setInterval(function(){ that.goto(that.nextindex) },2000) }}}</script>到这里，这个简单的轮播图就到此结束了。
以上就是vue.js能做轮播图吗的知识。速戳>>知识兔学习精品课！