Vue学习笔记四:跑马灯效果

跑马灯原理

先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字,然后后+前就可以了

HTML

如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    
    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>
<body>
    
    <!-- 这个div就是MVVM中的V,View -->
    <div id="app">

        <input type="button" value="跑马灯" :title="pao"  @click="startpmd"></input>

        <input type="button" value="暂停"   :title="stop" @click="stoppmd"></input>

        <h3>{{ msg }}</h3>

    </div>


    <script>
        // 这个vm就是MVVM中的VM,ViewModel
        var vm=new Vue({
         el: '#app',
        //  这个data就是MVVM中的M,Model
         data: {
             msg:"大家好,我是Vae,这是我即将发表的首张独创专辑自定义",
             pao:"开启跑马灯效果",
             stop:"暂停跑马灯效果",
             intervalid:null
         },
         methods: {
            startpmd(){
                if(this.intervalid!=null) return;

                this.intervalid = setInterval(() => {
                    var start=this.msg.substring(0,1)
                    var end=this.msg.substring(1)
                    this.msg=end+start
                },200)
            },
            stoppmd(){
                clearInterval(this.intervalid)
                this.intervalid=null
            } 
         }  

        })

    </script>

</body>
</html>

讲解一下,新学了一些知识

箭头函数

这个箭头函数的作用就是让函数内部的this等于外部的this,如果不使用箭头函数,就会出现this不一致的问题

计时器

setInterval是计时器开启的方法,用法就是setInterval(方法,时间)

clearInterval是清除计时器的方法,用法就是clearInterval(计时器)

就这两个知识点是新学的,其他的都没什么

跑马灯效果

可以自己测试一下,我就不截动态图了,麻烦

防盗链接:本博客由蜀云泉发表

posted @   蜀云泉  阅读(803)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· 外部H5唤起常用小程序链接规则整理
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 详解:订单履约系统规划
历史上的今天:
2018-04-26 NPOI学习笔记
点击右上角即可分享
微信分享提示