<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<script src="../../jQuery库/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="跑起来" @click="move">
<p>{{ msg }}</p>
<button v-on:click="stop">停止</button>
</div>
<script>
var vm= new Vue({
el:'#app',
data:{
// msg:'稳住，我们能赢',
// setInterval:null;
msg:'稳住，我们能赢',
interval:null
},
methods:{
/*move() {
var _this=this
setInterval(function(){
console.log(_this.msg);
var start = _this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = _this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
_this.msg = end + start
},400)
}*/
move() {
if(this.interval !=null) return;
this.interval = setInterval(() => {
console.log(this.msg);
var start = this.msg.substring(0, 1)
// 获取到 后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start
},400)
},
stop(){
clearInterval(this.interval)
this.interval= null
}
}
})
</script>
</body>
</html>
vue之跑马灯
猜你喜欢
转载自blog.csdn.net/Pandora_417/article/details/89945306
今日推荐
周排行