vue制作跑马灯的效果

版权声明:https://blog.csdn.net/weixin_43814195?t=1 https://blog.csdn.net/weixin_43814195/article/details/85009755

代码如下:

<!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软件呢) !喜欢的话!关注一下呗

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43814195/article/details/85009755
今日推荐