html模块!!
<div id="app"> <h4> {{msg}} </h4> //开始跑马状态 <input type="button" value="飘" @click=‘lang‘> //停止 <input type="button" value="定住" @click=‘stop‘> </div>
script模块
var vm =new Vue({ el:‘#app‘, data:{ msg:‘主要是开心!加油~~~!‘, intervalId:null,//在data定义 定时器Id }, methods:{ lang(){ //判断当前这个跑马是否有点击跑马,有则不执行下面。防止多次点击 if(this.intervalId!==null) return; // console.log(this.msg) this.intervalId=setInterval(() => { //开启定时器 var start=this.msg.substring(0,1) var end=this.msg.substring(1) //获取新的字符串,重新拼接,重新赋值给 this.msg this.msg =end+start },500) /*注意 Vue 实例,是会监听自己身上的 data中所有数据的改变,只要数据发生改变,就会把最新的数据同步到页面上 优点:这样子就不用考虑重新渲染DOM页面,只要把数据弄好就ojbk了 */ }, stop(){ //停止定时器 clearInterval(this.intervalId) console.log(31) this.intervalId=null //每当停止定时器后 重新赋值维null } } })
原文地址:https://www.cnblogs.com/mound/p/10561304.html
时间: 2024-11-05 21:55:02