步骤分析:
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.msgthis.msg = end + start;},400)},stop(){clearInterval(this.intervarlId);this.intervarlId = null;}}}</script>
