Vue.js Day1_11-12跑马灯效果制作

坚强是说给别人听的谎言 提交于 2020-01-02 14:24:38
<html>
    <head>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="开始" @click="start">
            <input type="button" value="结束" @click="stop">
            <p>{{ msg }}</p>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: "大不自多,海纳江河~ 唯学无际, 际于天地~",
                    intervalId: null //在data上定义定时器 Id
                },
                methods: {
                    start(){
                        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
                        }, 400)
                    },
                    stop(){
                        clearInterval(this.intervalId);
                        this.intervalId = null;
                    }
                }
            })
        </script>
    </body>
</html>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!