您的位置：首页 > Web前端 > Vue.js

Vue 实例代码

2019-03-29 15:04 337 查看

跑马灯代码段：（可直接复制使用）

[code]<!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;
}
}
});
&l
4000
t;/script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航