前端：运用vue.js实现跑马灯效果

Posted 2021-11-24 il_持之以恒_li

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端：运用vue.js实现跑马灯效果相关的知识，希望对你有一定的参考价值。

运行效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <input type="button" value="浪起来" @click="begin2">
        <input type="button" value="低调" @click="end2">
        <h5 v-html="msg1"></h5>
    </div>

    <script>

        // 在vue实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this. 
        var vue2=new Vue({
            el:'#app',
            data:{
                msg1:'猥琐发育，别浪~~！',
                intervalid:null
            },methods:{
                begin2:function(){
                    if(this.intervalid==null){    // 防止重复点击
                        // 使用正则表达式，否则存在 this 指向不明的问题
                        this.intervalid=setInterval(() => {
                            var start = this.msg1.substring(0,1);
                            var end = this.msg1.substring(1);
                            this.msg1 = end+start;
                        })    
                    }
                },end2(){
                    clearInterval(this.intervalid);
                    this.intervalid=null;  // 重新赋值
                }
            }
        });

    </script>

</body>
</html>

以上是关于前端：运用vue.js实现跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章