vue学习第二天：Vue跑马灯效果制作

分析：

　　1. 给开始按钮绑定一个点击事件

　　2.在按钮的事件处理函数中，写相关的业务代码

　　3.拿到msg字符串

　　4.调用字符串的substring来进行字符串的截取操作

　　5.重新赋值利用vm实例的特性来达到跑马灯效果

注意：

　　1.在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须要用this.属性名或者 this.方法名来进行访问

　　2. => 可以把data里的数据传入方法里的function

代码（附带停止）：

<div id="app">

        <input type="button" value="开始" @click='lang'>

        <input type="button" value="结束" @click='stop'>

        <h4>

            {{ msg }}

        </h4>

    </div>

    <script>

        var vm =new Vue({

            el: '#app',

            data: {

                msg: '小火车呜呜呜~~~~~~呜呜呜~~~~',

                intervalId: null

            },

            methods: {

                lang(){

                    if (this.intervalId!=null) return;

                    this.intervalId=setInterval(() => {

                    // console.log(this.msg)

                    // 截取第一个字符

                    var start=this.msg.substring(0,1)

                    // 获取到后面的字符

                    var end=this.msg.substring(1)

                    // 重新拼接并赋值

                    this.msg=end + start

                    // vm 实例，会监听自己的数据，只要一发生变化，就会自动把最新的数据从data传到页面

                    },500)

                },

                stop(){

                    clearInterval(this.intervalId);

                    this.intervalId=null;

                }

            }

        })

    </script>

巴特西

vue学习第二天：Vue跑马灯效果制作

分析：

注意：

代码（附带停止）：

最新文章

热门文章