vue的跑马灯效果制作

最新推荐文章于 2024-03-19 16:24:18 发布

全职计算机毕业设计

最新推荐文章于 2024-03-19 16:24:18 发布

阅读量4.9k

点赞数

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

本文链接：https://blog.csdn.net/qq_31293575/article/details/81117957

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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录制软件了，所以口头说明吧

完整原文请参考：http://blog.maptoface.com/post/87

全职计算机毕业设计

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue的跑马灯效果制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯效果</title> <script src="vue.js"></script></head><body&g...
复制链接

扫一扫