Vue学习之路第七篇：跑马灯项目实现

Posted 2021-02-05 shibin90

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习之路第七篇：跑马灯项目实现相关的知识，希望对你有一定的参考价值。

前面六篇讲解了Vue的一些基础知识，正所谓：学以致用，今天我们将用前六篇的基础知识，来实现类似跑马灯的项目。

学前准备：

需要掌握定时器的两个函数：setInterval和clearInterval以及作用域的概念

上代码，大家可以复制下来直接运行看看效果（vue.min.js 第一篇有下载链接）：

<!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>跑马灯效果</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
　　<!-- 页面部分 -->
    <div id="app">
        <button @click="go()">开始</button>&emsp;<button @click="stop()">停止</button>
        <p>{{ msg }}</p>
    </div>

　　<!-- JS部分 -->
    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : ‘好好努力，我的奥迪s5~‘,//跑马灯文字
                interObj : null  //定时器对象
            },
            methods : {
               
                go(){
                    if(this.interObj == null){
                        _this = this
                        this.interObj = setInterval(function(){
                        　　let start = _this.msg.substring(0,1);
                        　　let end = _this.msg.substring(1);
                        　　_this.msg = end + start;
                    　　},1000);
                    }
                    
                },
                stop(){
                    clearInterval(this.interObj);
                    this.interObj = null;
                }
            }
        });
    </script>
</body>
</html>