vue实现跑马灯效果

深碍√TFBOYSˉ_ 2022-04-18 06:23 476阅读 0赞

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X_UA-Compatible" content="ie=edge">
        <title>vue 入门</title>
        
        <script src="./lib/vue.js"></script>
    </head>
    
    <body>
            <div id="app">
            <input type="button" value="走你" @click="go" >
            <input type="button" value="@"  @click="show" />
            <input type="button" value="停止" @click="stop">
           <h4>{
       {msg}}</h4>
        </div>
        <script>
            //2  创建一个vue实例
            //当导入Vue包后，在浏览器的内存中，就多了一个Vue构造函数
            //在vm实例中如果要调用datas上的数据，或者想调用methods上的方法，需通过this访问
            var vm = new Vue({
                el: '#app',    //表示当前new的这个Vue实例，要控制页面上的哪个区域
                data: {  //data 属性中，存放的就是el中要用到的数据
                    msg: '猥琐发育别浪！稳住，我们能赢！若轻云之蔽月，若流风之回雪',   //通过Vue提供是指令，把数据渲染到页面，无需再手动操作DOM元素
                    intervalId: null        //在data上绑定一个定时器id
                },
                methods: {   //定义当前Vue实例的所有方法
                    show:  function(){
                        alert('hello');
                    },
                    
                    go(){
                            if(this.intervalId !=null)return;
                            this.intervalId = setInterval(()=>{
                            var start = this.msg.substring(0,1);
                            var end  = this.msg.substring(1);
                            this.msg = end + start;
                        },200)
                    },
                    stop(){
                        //清除定时器
                        clearInterval(this.intervalId)
                        //将定时器id重置为null
                        this.intervalId = null;
                    }
                }
            })
    
        </script>
    </body>
    
    </html>