VUE学习之跑马灯效果案例

基于VUE实现的跑马灯效果案例

逻辑分析
1.给两个按钮添加v-on的点击事件，此处用的省略写法：@click
2.核心思想就是对字符串message进行截取，每次截取将最后一个字放到最前面，剩下的字放到最后面
3.给点击开启事件增加一个定时器，就可以实现跑马灯效果
4.点击取消跑马灯效果就是讲之前的定时器清除即可
VUE管理区域

 <div id="app">
        <input type="button" value="跑起来" @click="run">
        <input type="button" value="停止" @click="stop">

        <h4 v-cloak>{{message}}</h4>
    </div>

js vue实例

<script src="../js/vue.js"></script>
    <script>

        var vue = new Vue({
            el:"#app",
            data:{
                message:"这是跑马灯，跑马灯~~~!",
                intervalId:null     //将intervalId在初始data中设为null
            },
            methods:{
               run(){

                   if(this.intervalId != null) return;

                   this.intervalId =setInterval (() =>{
                    //字符串截取
                   var start = this.message.substring(0,1)
                   var end = this.message.substring(1)
                   //调换位置
                   this.message = end+start
                   },400)
                   // 注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从 data 上同步到页面中去；【好处：程序员指需要关心数据，不需要考虑如何重新渲染DOM页面】
               },
               stop(){
                    //清除计时器
                    clearInterval(this.intervalId)
                    //每次清除计时器后，将计时器 intervalId 重新设为空
                    this.intervalId = null
               } 
            }
        })
    </script>

经测试，最终可实现跑马灯效果