欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue的跑马灯效果制作

程序员文章站 2022-07-14 21:33:48
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
    <script src="vue.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;
                },50);
            }
        }
    })
</script>
</body>
</html>

效果:字再往左边跑,不想下gif录制软件了,所以口头说明吧

 

vue的跑马灯效果制作