vue中轮播图的实现
Posted kend
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中轮播图的实现相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <!--视图--> <img :src="images[currentIndex].imgSrc" alt="" @click="imgHandler"> <br> <button @click="prevHandler">上一张</button> <button @click="nextHandler">下一张</button> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src=‘./vue.js‘></script> <script> let vm = new Vue({ // 声明变量 实例化一个对象vm(指的是vue的实例) el:"#app", //绑定根元素 data(){ return{ images:[ //数据 {id:1,imgSrc:"img/1.jpg"}, {id:2,imgSrc:"img/2.jpg"}, {id:3,imgSrc:"img/3.jpg"}, // {id:4,imgSrc:"img/4.jpg"}, ], currentIndex:0 //一开始设置为 0 } }, methods:{// 对象内容是js函数 nextHandler(e){ console.log(e); this.currentIndex++; //更改图片地址 if (this.currentIndex == 3){ //js的if判断语句 this.currentIndex = 0; } }, prevHandler(e) { console.log(e); this.currentIndex--; //更改图片地址 if (this.currentIndex == 0) { //js的if判断语句 this.currentIndex = 3; } }, imgHandler(e){ //每一个事件都有一个event对象, 冒泡阻止默认事件学的 console.log(e.target);//当前目标对象 <img src="img/1.jpg" alt> console.log(this); //实例化里面的对象this 指的都是当前实例化对象 } }, //create() 组件创建完成, 组件创建完成立马往后台发ajax // ajax vue的钩子函数 // created(){ // // console.log(this); //就是当前的vm // setInterval(function(){ // console.log(this);//this是window对象 但是想把this的指向改成vm 所以把匿名函数改成箭头函数 // },1000) // } created(){ // this的指向问题 ************* 能用箭头函数不用匿名函数 //匿名函数改成箭头函数 this代指vue setInterval( ()=>{ console.log(this);//this是 vue 对象 },1000)//自动循环播放图片 1秒播放一次 } }) </script> </body> </html>
以上是关于vue中轮播图的实现的主要内容，如果未能解决你的问题，请参考以下文章
vue中轮播组件，实现默认显示3张图片，中间显示全部两边显示部分
Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程