跑马灯半成品（上）

最新推荐文章于 2024-03-23 20:01:29 发布

是吃货不是贝爷

最新推荐文章于 2024-03-23 20:01:29 发布

阅读量104

点赞数

分类专栏： vue 文章标签： vue 新手

本文链接：https://blog.csdn.net/q4451728/article/details/99575899

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head lang="en">
        <mata charset="utf-8">
        <meta name="冒险岛" content="小小的程序，大大的思想">
        <title>冒险岛公告</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="mxd">
            <input type="button" value="run！" @click="goahead">
            <h3>{{ msg }}</h3>
        </div>
        <script>
            var vm = new Vue({
                el: '#mxd',
                data: {
                    msg: '好消息，好消息！商城大降价，各种惊喜等你发现!'
                },
                methods: {
                    goahead() {
                        setInterval(() => {
                        var former = this.msg.substring(0,1)
                        var now = this.msg.substring(1)
                        this.msg = now + former
                        }, 200); 
                    }
                }
            })
        </script>
    </body>
</html>

最近刚刚学习vue，首先的小任务就是跑马灯效果。
既然是半成品，也就能很容易发现缺点，这类似于前面的赛跑游戏，如果按键按的过快，执行速度也会变得很快。

是吃货不是贝爷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跑马灯半成品（上）

<!DOCTYPE html><html> <head lang="en"> <mata charset="utf-8"> <meta name="冒险岛" content="小小的程序，大大的思想"> <title>冒险岛公告</title> ...
复制链接

扫一扫