逻辑:
- 使用字符串方法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>