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="../vuejs/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="跑起来" @click=run>
        <input type="button" value="停止" @click=stop>
        <h4> {{msg}} </h4>
    </div>
    <script>
        // 注意：在vm实例中，如果想要获取data上的数据,或者想要调用 methods 中的方法，必须通过this.数据属性名 或 this.方法名 来进行访问
        // 这里的this,就表示 我们 new 出来的 VM实例对象
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '农业产品批发管理中心-------',
                titleStop:null  //在data上定义 定时器Id
            },
            methods: {
                run() {
                    if(this.titleStop!=null){
                        return;
                    }
                   this.titleStop=setInterval(()=> {
                        //获取到头的第一个字符
                        //js substring方法 提取字符串两个下标之间的字符
                        var start = this.msg.substring(0, 1);
                        //end是去除下标为1的字符的字符串
                        var end = this.msg.substring(1);
                        this.msg = end + start;
                        //注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，
                        //从data上同步到页面中去;[好处：程序员只需要关心数据,不需要考虑如何重新渲染dom页面]
                    }, 400)
                  
                },
                stop(){  //停止定时器
                    clearInterval(this.titleStop);
                    //每当清除了定时器之后，需要重新把titleStop设为null
                    this.titleStop=null;
                }
            },
        })
        //分析:
        //1.给按钮绑定一个点击事件 v-on @
        // 2. 在按钮的事件处理函数中,写相关的逻辑代码: 拿到msg 字符串，
        //    然后调用字符串的substring 来进行字符串的截取操作, 把第一个字符截取出来,放到最后一个位置即可。
        // 3.为了实现点击下按钮,自动截取的功能,需要把步骤2放进去
    </script>
</body>

</html>