vue案例——跑马灯效果

最新推荐文章于 2022-06-14 16:42:30 发布

LullabyLY

最新推荐文章于 2022-06-14 16:42:30 发布

阅读量427

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_42853241/article/details/97315647

版权

Vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

跑马灯效果：通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动
代码主要是运用字符串的方法以及定时器来完成功能。

在 VM实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法，必须通过 this.数据属性名或
this.方法名来进行访问，这里的this，就表示我们 new 出来的 VM 实例对象 VM实例，会监听自己身上 data
中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data
上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="跑马灯" @click="action">
    <input type="button" value="停止" @click="stop">
    <h4>{{msg}}</h4>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:"欢迎光临本店，希望您用餐愉快！",
            timer:null
        },
        methods:{
            action(){
                if(this.timer!=null) return;
                this.timer=setInterval(()=>{
                    var start=this.msg.substring(0,1);
                    var end=this.msg.substring(1);
                    this.msg=end+start;
                },200);
            },
            stop(){
                clearInterval(this.timer);
                this.timer=null;
            }
        }
    })
</script>
</html>

在这里插入图片描述

LullabyLY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue案例——跑马灯效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js"></script></head>&...
复制链接

扫一扫