VUE跑马灯效果制作

比眉伴天荒 2023-10-05 18:52 6阅读 0赞

**分析：**

1. 给【开始】按钮绑定一个点击事件

2. 在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串，然后调用字符串的substring来进行字符串的截取，把第一个字符截取出来，放到最后一个之后即可

3. 为了实现点击之后自动截取的功能，需要把2中的代码放入定时器中

4. 按下【停止】按钮时只需要关闭定时器即可

<!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>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
                <input type="button" value="开始" @click="start">
                <input type="button" value="结束" @click="stop">
         <h4>{
       {msg}}</h4>
        </div>
        <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'123456789',
                intervalid:null
            },
            methods:{
                
                start(){
                    if(this.intervalid!=null) return;
                    //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算0表达式
                   this.intervalid = setInterval( () => { 
                        //调用data上的数据，火或调用methods中的方法必须通过this.数据属性名或者this.方法名
                    var st = this.msg.substring(0,1)//获取头的第一个字符
                    var end = this.msg.substring(1)//获取后面所有字符
                    this.msg=end+st            //重新拼接
                    } ,400)
                },
                stop(){
                   clearInterval(this.intervalid)
                   this.intervalid=null//每当清除定时器后要重新置为null
                }
            }
        })
    
        </script>
    </body>
    </html>

**vue实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把更新的数据从data中同步到页面。**