Vue文字流动，涉及定时器字符串的截取

た入场券 2023-02-21 04:45 6阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div style="margin-top: 50px;" id="apps">
            <input type="button" value="转起来" @click = 'lang'>
            <input type="button" value="别浪" @click = 'stop'>
            <h1 v-text='msgs'></h1>
        </div>
        <script src="../js/vue-2.4.0 .js"></script>
        <script>
            // 在vm实例中想要获取data上的数据，或者想要调用methods中的方法，必须
            // 通过this数据属性名 或 this.方法名，这里的this，即表示我们的new出来的，
            // vm的实例.
            var vm = new Vue ({ 
                el: '#apps',
                data: { 
                    msgs: '陕西长安竞技',
                    intervalId: null
                },
                methods: { 
                    lang(){ 
                        // var _this = this;
                        // 加上上面 var _this = this也可以写成:
                        //setInterval(function () { 
                        if (this.intervalId != null)return;   // 再次点击的时候先查看是不是为空，为空添加ID不为空则不用添加返回return即可
                        this.intervalId = setInterval( () => {    // 定时器会返回一个定时器ID 
                            // console.log(this.msgs)
                            // substring 用于截取字符串
                            var start = this.msgs.substring(0, 1) // 截取第一个字符串
                            var end = this.msgs.substring(1) // 截取1 之后的所有字符串
                            this.msgs = end + start
                            // 注意：在vm对象会监听自己自己data数据的改变，data数据一旦改变就会
                            // 把最新的数据同步到页面上来，不需要如何重新渲染到页面上来。
                        }, 400)
                        // alert(this.intervalId)
                    },
                    stop(){ 
                        // 根据返回的定时器ID来关闭相应的定时器
                        clearInterval(this.intervalId)
                    }
                }
            })
        </script>
    </body>
    </html>```