欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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