用VUE实现跑马灯效果

最新推荐文章于 2024-07-22 09:29:57 发布

ThinkPet

最新推荐文章于 2024-07-22 09:29:57 发布

阅读量965

点赞数

分类专栏： WEB前端文章标签： VUE

本文链接：https://blog.csdn.net/ThinkPet/article/details/86671819

版权

WEB前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调"   @click="stop">
        <h4>{{ msg }}</h4>
    </div>

    <script>
        //在 VM 实例中，如果想获取data上的数据，或者想要调用 methods 中的方法，
        //必须通过  this.数据属性名  或 this.方法名  来进行访问 ，这里的this ,就表示我们 new 出来的VM 实例对象
        
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '跑马灯测试1，2，3，4，5，6 ',
                intervalId: null  //在data上定义 定时器Id
            },
            methods: {
                lang(){

                  if(this.intervalId != null)  return;
                    
                   this.intervalId = setInterval( () => {
                        console.log(this.msg);
                        // 获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到 后面的所有字符
                        var end = this.msg.substring(1);
                        // 重新拼接得到 新的字符串 ，并赋值给 this.msg
                        this.msg =  end  + start;
                   },400 )
                   
                },

                stop(){ //停止定时器
                    clearInterval(this.intervalId)
                    //每当清除了定时器之后，需要把intervalId 重置为null
                    this.intervalId = null;
                }
            }
        })

        //VM 实例，会监听自己身上data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data上同步到页面中去；
        //好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM
    </script>
    

</body>
</html>

ThinkPet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用VUE实现跑马灯效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫