Vue.js day01跑马灯制作

跑马灯效果

首先先创建div和Vue实例

<div id="app">
<h3>{{msg}}</h3>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        msg:'狼人马大帅'
    },
    methods{}
})

然后创建两个按钮，控制跑马灯事件

input:button value:"跑马灯" @click="lang"
input:button value:"停下" @click="stop"


vue部分
//在vm实例中，想要获取data上的数据，或者想要调用methods中的方法，
        //必须通过this.数据名或者this.方法名进行访问。
data:{
     msg:'猥琐发育别浪~~~~',
     intervalId:null,
}
methods:{
    lang(){
        if(this.intervalId != null) return;
        //这里使用setInterval不断调用内部函数，实现跑马灯前后字符替换
        this.intervalId=setIntval(()=>{
            //首先获取头一个字符
            var start =  this.msg.substring(0,1)
            //然后获取到头个字符后面的所有字符
            var end=this.msg.substring
            //然后重新拼接并且给msg赋值
            this.msg = end + start
        },400)
    },
    stop(){
                clearInterval(this.intervalId)
                this.intervalId=null;//每当清除定时器之后，重新给intervalId赋值为null
                }
}