逻辑:
- 使用字符串方法substring实现文本的更改 =>第一个字符放在最后,重复操作
- 使用定时器功能实现自动运行
<div id="app"><input type="button" value="开始" @click="start"><input type="button" value="停止" @click="stop"><h3>{{msg}}</h3></div><script>var app = new Vue({el:"#app",data() {return {msg:"我是一个能滚动的弹幕~~",intervalId:null}},methods: {start(){if(this.intervalId != null) return;//开启定时器// 箭头函数解决this指向this.intervalId=setInterval(() => {//获取第一个字符var start = this.msg.substring(0,1)//获取后面的字符var end = this.msg.substring(1)//拼接this.msg = end+start}, 300);},stop(){//清除定时器clearInterval(this.intervalId)this.intervalId=null;}},})</script>
