步骤分析:
1.给浪起来按钮,绑定一个点击事件
2. 在按钮的事件处理函数中,写相关的业务代码,拿到msg字符串,用substring来进行字符串的截取,把第一个字符截取出来,放到最后一个位置即可;
3.为了实现点击下按钮。自动截取,需要把上步骤放到一个定时器里。
<template>
<div id="app">
<input @click="handleClick" type="button" value="浪起来">
<input type="button" value="低调" @click="stop">
<h4>{{msg}}</h4>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
msg:"猥琐发育,别浪~~",
intervarlId:null
}
},
methods:{
handleClick(){
if(this.intervarlId != null) return;
// 箭头函数解决函数内部this指向问题
this.intervarlId= setInterval(()=>{
// 获取第一个字符
var start = this.msg.substring(0,1);
console.log(start);
// 获取后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串,并赋值给this.msg
this.msg = end + start;
},400)
},
stop(){
clearInterval(this.intervarlId);
this.intervarlId = null;
}
}
}
</script>