vue 学习 例子 整理 记录 自学 前端

<div id="app">
	<p>{{msg}}</p>
	<input v-model="msg"></input>
	<button v-on:click="start">开始</button>
	<button v-on:click="stop">停止</button>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg:'冠状病毒',
			intervalId:null
		},
		methods:{
			start:function(){
				console.log(this.msg)
				if (this.intervalId != null) return;
				this.intervalId = setInterval(() => {
					var start = this.msg.substring(0, 1);
					var end = this.msg.substring(1);
					this.msg = end + start;
				}, 400);
			},
			stop:function(){
				clearInterval(this.intervalId);
				this.intervalId = null;
			}
		}
	})
</script>