Vue 跑马灯效果

坚强是说给别人听的谎言 提交于 2020-02-05 02:06:10
<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>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!