Vue教程02(跑马灯效果案例)

// 获取到头的第一个字符

// this

if (this.intervalId != null) return;

this.intervalId = setInterval(() => {

var start = this.msg.substring(0, 1)

// 获取到 后面的所有字符

var end = this.msg.substring(1)

// 重新拼接得到新的字符串，并赋值给 this.msg

this.msg = end + start

}, 400)

// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

},

stop() {

}

}

})

2.3 取消定时器

stop() {

// 停止定时器

clearInterval(this.intervalId)

// 每当清除了定时器之后，需要重新把 intervalId 置为 null

this.intervalId = null;

}

2.4 完整代码

<input type=“button” value=“加油” @click=“lang”>

<input type=“button” value=“低调” @click=“stop”>

{{ msg }}