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

跑马灯原理
HTML
- 箭头函数
- 计时器
跑马灯效果

跑马灯原理

先讲讲跑马灯的原理，就是一行字，会滚动，思路是这样的，使用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(计时器)

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

跑马灯效果

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

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