分析:
1. 给【开始】按钮绑定一个点击事件
2. 在按钮的事件处理函数中,写相关的业务逻辑代码,拿到msg字符串,然后调用字符串的substring来进行字符串的截取,把第一个字符截取出来,放到最后一个之后即可
3. 为了实现点击之后自动截取的功能,需要把2中的代码放入定时器中
4. 按下【停止】按钮时只需要关闭定时器即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="结束" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'123456789',
intervalid:null
},
methods:{
start(){
if(this.intervalid!=null) return;
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算0表达式
this.intervalid = setInterval( () => {
//调用data上的数据,火或调用methods中的方法必须通过this.数据属性名或者this.方法名
var st = this.msg.substring(0,1)//获取头的第一个字符
var end = this.msg.substring(1)//获取后面所有字符
this.msg=end+st //重新拼接
} ,400)
},
stop(){
clearInterval(this.intervalid)
this.intervalid=null//每当清除定时器后要重新置为null
}
}
})
</script>
</body>
</html>
vue实例会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把更新的数据从data中同步到页面。