<body>
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h4>{{ msg }}</h4>
</div>
<script>
//注意:在VM实例中,如果想要获取data上的数据,或者想要调用methods中的方法
//必须通过this.数据属性名或this.方法名来进行访问
//这里的this, 就表示new出来的VM实例对象
var vm=new Vue({
el: '#app',
data: {
msg: '猥琐发育,别浪~~!',
intervalId: null //在data上定义定时器Id
},
methods: {
lang() {
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() { //停止定时器
clearInterval(this.intervalId)
//每当清除了定时器之后,需要重新把intervalId置为null
this.intervalId = null;
}
})
//分析:
//1. 给【浪起来】按钮,绑定一个点击事件,v-on @
//2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到msg字符串,
//然后调用字符串的substring来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可;
//3. 为了实现点击下按钮,自动截取的功能,需要把2步骤中的代码放到一个定时器中去;
</script>
</body>