【vue跑马灯】

最新推荐文章于 2024-10-05 01:22:45 发布

柒一’

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量58

点赞数 1

文章标签： Vue.js 跑马灯字符串截取动画效果 JavaScript

本文链接：https://blog.csdn.net/m0_67969470/article/details/127827120

版权

跑马灯

截取第一个字符串，然后把他放到最后

<body>
    <div class="box">
        <button @click="start">开始</button>
        <button @click="ends">暂停</button>
        <p>{{msg}}</p>
    </div>
</body>

var vm = new Vue({
        el: '.box',
        data: {
            msg: '猥琐发育，别浪~~',
            time: undefined,
        },
        methods: {
            start() {
                clearInterval(this.time)
                 this.time = setInterval(() => {
                 // 截取第一个字符串
                    let start = this.msg.substring(0, 1)
                   // 截取除第一个以外的字符串
                    let ends = this.msg.substring(1)
                    // 把第一个拼接到最后
                    this.msg = ends + start
                }, 100)
            },
            ends() {
                clearInterval(this.time)
            }
        }
    })