<template>
<div id="app">
<input type="button" name="" value="开始" @click="start">
<input type="button" name="" value="停止" @click="stop">
<h4>{{msg}}</h4>
</div>
</template>
<script>
export default {
name: 'App',
data: function () {
return {
msg:"欢迎光临~~",
intervalId:null
}
},
methods: {
start () {
if(this.intervalId!=null) return;
this.intervalId = setInterval( () => {
// 获取第一个字符
var start = this.msg.substring(0,1);
// 获取后面字符
var end = this.msg.substring(1);
// 重新拼接的到新的字符串,并赋值给this.msg
this.msg = end + start;
},200)
//
},
stop () {
clearInterval(this.intervalId);
// 每当清除了定时器,需要重新赋值为null
this.intervalId = null;
}
}
}
</script>
vue笔记之跑马灯效果
猜你喜欢
转载自blog.csdn.net/qq_36781179/article/details/82760513
今日推荐
周排行