运行效果如下：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue学习</title><script src="../vue.js"></script></head><body><div id="app"><input type="button" value="浪起来" @click="begin2"><input type="button" value="低调" @click="end2"><h5 v-html="msg1"></h5></div><script>// 在vue实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this. var vue2=new Vue({el:'#app',data:{msg1:'猥琐发育，别浪~~！',intervalid:null},methods:{begin2:function(){if(this.intervalid==null){// 防止重复点击// 使用正则表达式，否则存在 this 指向不明的问题this.intervalid=setInterval(() => {var start = this.msg1.substring(0,1);var end = this.msg1.substring(1);this.msg1 = end+start;}) }},end2(){clearInterval(this.intervalid);this.intervalid=null; // 重新赋值}}});</script></body></html>
