vue实现跑马灯效果

来源：网络文章列表 2019-06-10 826

vue跑马灯效果

vue实现一个简单的跑马灯效果

代码：

<!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>Document</title>
    <!-- 1. 引入vue库 -->
	
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
    <div id="app2">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="停止" @click="stop">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue( {
            el:"#app2",
            data:{
                msg:"赶紧做毕设，别瞎鸡巴浪了~~~",
                interval: null
            },
            methods:{
                lang() {
                    if(this.interval != null) return;
                    console.log(this.msg);
                    //做跑马灯效果思路是
                    //1. 先拿到字符串， 再每次截取首字符串 然后添加到末尾
                    // var _this_ = this;
                    // setInterval( function () {
                    //     var start = _this_.msg.substring(0, 1)
                    //     var end = _this_.msg.substring(1)
                    //     _this_.msg = end + start;
                    // }, 400)
                    //方法二、用箭头函数,, 补充自己的两个知识1.字符串处理问题 2.js中闭包问题
                    this.interval =  setInterval( ()=> { //引用箭头函数解决指向问题 内部的this指向外部的实列
                        var start = this.msg.substring(0, 1)
                        var end = this.msg.substring(1)
                        this.msg = end + start;
                    }, 400)
                    
                },
                stop() {
                    clearInterval(this.interval) //定时器被清除了，但没有给interval赋值为空
                    this.interval = null
                }
            }
        })   
    </script>
    
</body>
</html>