<template>
<div>
<div class="text">{{msg}}</div>
<input type="button" id="start" value="开始" @click="start">
<input type="button" id="end" value="结束" @click="end">
</div>
</template>
<script>
export default {
data(){
return{
msg:"感谢你特别邀请,来见证你的爱情!",
setIntervalId:null,
}
},
methods:{
start(){
this.setIntervalId = setInterval(()=>{
var start = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + start;
},500)
},
end(){
clearInterval(this.setIntervalId);
this.setIntervalId = null;
}
}
}
</script>
<style scoped>
.text {
/* width: 240px; */
margin: auto;
}
input[type=button] {
display: inline-block;
width: 50px;
margin-top: 20px;
margin-right: 20px;
cursor: pointer;
}
</style>
vue文字走马灯
最新推荐文章于 2024-07-01 16:33:37 发布