Vue 实例代码

跑马灯代码段:(可直接复制使用)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="别浪" @click="stop" />
			<h2 v-cloak>{{ msg }}</h2>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "猥琐发育,不要浪啊~~~",
					flag: null //根据该主键清除定时器
				},
				methods: {
					lang() {
						// //第一种 this指向问题
						// var _this = this;
						// setInterval(function() {
						// 	var start = _this.msg.substring(0, 1);
						// 	var end = _this.msg.substring(1);
						// 	_this.msg = end + start;
						// }, 200);
						//第二种  箭头函数解决this指向
						if (this.flag != null) return; //当第一次执行过后,this.flag存在值 就会退出!!!
						this.flag = setInterval(() => {
							var start = this.msg.substring(0, 1);
							var end = this.msg.substring(1);
							this.msg = end + start;
						}, 200);
					},
					stop() {
						clearInterval(this.flag);
						this.flag = null;
					}
				}
			});
		</script>
	</body>
</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页