vue 实现无限轮播_纯vue实现轮播，超简单

用vue如何实现轮播，超简单。新手用vue实现轮播，超简单

知识点：

v-if 指令 --- 显示隐藏

transform --- vue 自带过渡动画

1 开始：准备 dom 并挂载

.banner{width: 640px; height: 300px; background-color: #f0f0f0; margin: 50px auto; position: relative; overflow: hidden;}

// 新建实例，挂载

var app = new Vue({

el: '#app',

data() {

return { }

}

})

把图片渲染到html中，这里用数字代替

v-for="(item, index) in 3"

v-if="num==index"

:key="index"

>

{ {item}}

2 设置方法

// 新建实例，挂载

var app = new Vue({

el: '#app',

data() {

return {

num: 0 // 初始显示第几个

}

},

mounted() {

// this.play()