码迷,mamicode.com
首页 > 其他好文 > 详细

vue中轮播图的实现

时间:2019-10-07 13:31:05      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:箭头函数   log   meta   rip   html   creat   jquery   ted   语句   

  • 轮播图

    <!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中轮播图的实现

标签:箭头函数   log   meta   rip   html   creat   jquery   ted   语句   

原文地址:https://www.cnblogs.com/bigox/p/11630001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!