温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue如何实现跑马灯效果

发布时间:2021-10-29 13:02:57 来源:亿速云 阅读:161 作者:小新 栏目:开发技术

这篇文章主要介绍Vue如何实现跑马灯效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1、跑马灯效果

Vue如何实现跑马灯效果

说明:单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动

Vue如何实现跑马灯效果

2、完整代码 (注意:代码中需要引入vue.js文件,这个文件自己根据目录位置引入,具体位置代码中有注释)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <!-- 引入vue.js文件-->
    <script src="../vue.js"></script>
 <style type="text/css">
  #app{
   padding: 20px;
  }
 </style>
</head>
<body>
<div id="app">
    <button @click="run">应援</button>
    <button @click="stop">暂停</button>
 <h4>{{msg}}</h4>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"朋友朋友我爱你,就像老鼠爱大米~~~!",
            timer:null //在data上定义定时器timer,默认为null
        },
        methods:{
            run(){
    // 如果timer已经赋值就返回
                if(this.timer){return};
                this.timer = setInterval(() => {
     // msg分割为数组
     var arr = this.msg.split('');
     // shift删除并返回删除的那个,push添加到最后
     // 把数组第一个元素放入到最后面
     arr.push(arr.shift());
     // arr.join('')吧数组连接为字符串复制给msg
     this.msg = arr.join('');
                },100)
            },
            stop(){
                //清除定时器
                clearInterval(this.timer);
                //清除定时器之后,需要重新将定时器置为null
                this.timer = null;
            }
        }
    })
</script>
</body>
</html>

以上是“Vue如何实现跑马灯效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI