Vue.js跑马灯代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" name="" id="" value="开始" v-on:click="start"/>
            <input type="button" name="" id="" value="停止" v-on:click="stop"/>
            <p>{{msg}}</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'这是一个简单的小情歌',
                    inervalid:null
                },
                methods:{
                    start(){
                        if(this.inervalid!=null)
                        {
                            return
                        }
                        this.inervalid=setInterval(()=>{
                            this.msg=this.msg.substring(1)+this.msg.substring(0,1)
                        },400)
                    },
                    stop(){
                        clearInterval(this.inervalid)
                        this.inervalid=null

                    }
                }
            })
        </script>
    </body>
</html>

setInterval(()=>{
this.msg=this.msg.substring(1)+this.msg.substring(0,1)
},400)
这里使用了箭头运算符,箭头运算符创建的函数的this是箭头运算符所属作用域的this
语法真的好像c++…

留下评论