vue制作跑马灯的效果

最新推荐文章于 2023-08-01 17:43:03 发布

MIss.Fan

最新推荐文章于 2023-08-01 17:43:03 发布

阅读量719

点赞数 1

分类专栏： vue 文章标签： vue跑马灯效果

本文链接：https://blog.csdn.net/weixin_43814195/article/details/85009755

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script src="../vue-2.5.17.js"></script>
</head>
<body>
<div id="app">
   <input type="button" value="开始" @click="lang">   <!--点击事件绑定-->
    <h4>{{ msg }}</h4>
</div>
<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            msg:'传智专修学院欢迎您！！'
        },
        methods:{
            lang(){
                _this=this   //将this给到_this然后传入函数内
                setInterval(function () {  //定时任务
                    console.log(_this.msg);
                    var first=_this.msg.substring(0,1);
                    var end=_this.msg.substring(1);
                    _this.msg=end+first;
                },500);
            }
        }
    })
</script>
</body>

效果如下：（小编还是特地的去下载的gif软件呢）！喜欢的话！关注一下呗

在这里插入图片描述