vue实现简单的跑马灯效果 vue实现简单的跑马灯效果

本文实例为大家分享了vue实现简单跑马灯效果的具体代码，供大家参考，具体内容如下
效果图

文章图片

代码
html

{{msg}}

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); // 重新拼接msgthis.msg = endMsg + startMsg; },400)},stop(){clearInterval(this.timer); // 可以自己打印一下清除定时器以后的timer，会发现不是为null的，所有要重新赋值this.timer = null; }}});

【vue实现简单的跑马灯效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。