Vue 跑马灯效果
程序员文章站
2022-03-03 09:31:23
...
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h3 v-cloak>
{{msg}}
</h3>
</div>
<script>
var vm = new Vue ({
el : '#app',
data : {
msg : '猥琐发育,别浪~~~',
intervalId : null
},
methods : {
lang () {
this.intervalId = setInterval(() => {
var start = this.msg.substring(0,1)
var end = this.msg.substring(1)
this.msg = end + start
}, 400)
},
stop () {
clearInterval(this.intervalId)
}
}
})
</script>
上一篇: Vue 跑马灯效果
下一篇: vue中使用i18n