跑马灯案例vue


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<script src="vue-2.4.0.js">script>
head>
<body>
	<div id="app">
		<input type="button" value="开始" @click="start">
		<input type="button" value="结束" @click="stop">
		<h4>{{msg}}h4>
	div>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"热爱可抵岁月漫长,我们来日方长"
			},
			methods:{
				start() {
					if (this.intervalID) return;
					this.intervalID = setInterval(() => {
						// console.log(this.msg);
						var start = this.msg.substring(0,1);
						var end = this.msg.substring(1);
						this.msg = end + start;
						// console.log(this.msg);	
					},400)
					
				},
				stop() {
					clearInterval(this.intervalID);
					this.intervalID = null;
				}
			}

		})
	script>
body>
html>

你可能感兴趣的:(学习日常)