vue实现跑马灯
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="浪起来" v-on:click="lang">
<!-- //用methods编写方法函数 -->
<input type="button" value="停止" v-on:click="stop">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪！',
intervalId: null //这个是单独判断按键的次数 默认是null
},
methods: {
lang() {
//console.log(this.msg)
//通过this可以操作数据和方法
//这里if判断的就是intervalId的按动次数，如果按过了就不执行后面的代码
//使用的箭头函数 因为在使用interval方法时 this的作用域会发生改变 通过箭头函数 可以正确的使this规定在正确的定义域里面
// 箭头函数 ()=>{}
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)
},
// lang() {
// //在这里我们可以通过绑定我们的this方法 通过在function外面加一个括号绑定一个this方法
// if (this.intervalId != null) return
// this.intervalId = setInterval((function() {
// var start = this.msg.substring(0, 1);
// var end = this.msg.substring(1);
// this.msg = end + start;
// }).bind(this), 400)
// },
stop() {
clearInterval(this.intervalId);
this.intervalId = null
}
}
})
</script>
</body>
</html>
网友评论