vue跑马灯效果 vue实现简单的跑马灯效果
今天会下雨吗 人气:0想了解vue实现简单的跑马灯效果的相关内容吗,今天会下雨吗在本文为您仔细讲解vue跑马灯效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,跑马灯,下面大家一起来学习吧。
效果图
代码
html
<div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div>
vue
var app = new Vue({ el: "#app", // 表示,当前我们new的这vue实例,要控制页面上的那个区域 // data就是mvvm中的 m,专门用来保存每个页面的数据 data:{ msg: "锁定今晚19:30李佳琦直播间,不要错过哟~", timer: null }, methods:{ start(){ // 通过定时器文字自己按时滚动 // 箭头函数可以解决this指向问题 // 箭头函数里的this指向跟函数外面的一致 // 当 timer 不为空的时候才开启定时器 if (this.timer != null) return; this.timer = setInterval(() => { // 获取第一个字符 var startMsg = this.msg.substring(0,1); // 获取后面所有的字符 var endMsg = this.msg.substring(1); // 重新拼接msg this.msg = endMsg + startMsg; },400) }, stop(){ clearInterval(this.timer); // 可以自己打印一下清除定时器以后的timer, 会发现不是为null的,所有要重新赋值 this.timer = null; } } });
加载全部内容