<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="浪起来" v-on:click="lang">
<input type="button" value="低调" v-on:click="stop">
<h3>{{ message }}</h3>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '猥琐发育,别浪!',
// 把定时器的名字定义在这,方便去除
timer: ''
},
methods: {
lang: function () {
//设置一个定时器,每s执行一次数据的截取
// 防止定时器被重复定义,如果定时器已经存在了,就不要再定义了
if (this.timer) {
return
}
// 箭头函数的好处:使里面的this和外面的this指向相同
this.timer = setInterval(() => {
//从第0个开始,截取一个
var start = this.message.substring(0,1)
//从第一个开始,截取以后的
var end = this.message.substring(1)
this.message = end + start
}, 400);
},
stop: function () {
clearInterval(this.timer)
// console.log(this.timer) 3
// 要让此时定时器的值为null
this.timer = ''
}
}
})
</script>
</body>
</html>