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

最新推荐文章于 2024-02-28 16:03:58 发布

Python User

最新推荐文章于 2024-02-28 16:03:58 发布

阅读量177

点赞数

分类专栏： Vue基础部分文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44684357/article/details/106999596

版权

Vue基础部分专栏收录该内容

33 篇文章 2 订阅

订阅专栏

<!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>```