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

时间：2022-09-21 09:38:02

跑马灯原理

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

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

跑马灯效果

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

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

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

相关文章