vue实现简单的跑马灯效果
时间：2022-08-20 08:08:33 | 栏目：vue | 点击：次
本文实例为大家分享了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;
}
}
});