跑马灯效果 - ellaha

知识点：

1，在vm实例中要想要获取data上的数据或者想要调用methods中的方法，必须通过this.数据名或者 this.方法名进行访问这里的this就表示我们new出来的vm实例对象

2，vm实例会监听自己身上data中所有数据的改变只要数据发生改变就会自动把最新的数据从data上同步到页面中去

好处：程序员只关系数据不需要考虑如何重新渲染dom页面

3，箭头函数解决this指向问题让外部this和函数体内this指向保持一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<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: function(){
                // 注意：在vm实例中 如果想要获取data上的数据 或者想要调用methods中的方法
                // 必须通过this.数据名 或者 this.方法名进行访问 这里的this就表示我们new出来的vm实例对象
                console.log(this.msg)
                if (this.intervalId != null) return;

                // var _this = this
                // setInterval(function(){
                //     // 第一步
                //     var start = this.msg.substring(0, 1)
                //     var end = this.msg.substring(1)
                //     // vm实例会监听自己身上data中所有数据的改变
                //     // 只要数据发生改变 就会自动把最新的数据从data上同步到页面中去
                //     //好处：程序员只关系数据 不需要考虑如何重新渲染dom页面
                //     this.msg = end + start
                // }, 400)

                //箭头函数解决this指向问题 让外部this和函数体内this指向保持一致
                this.intervalId = setInterval( () => {
                    // 第一步
                    var start = this.msg.substring(0, 1)
                    var end = this.msg.substring(1)
                    // vm实例会监听自己身上data中所有数据的改变
                    // 只要数据发生改变 就会自动把最新的数据从data上同步到页面中去
                    //好处：程序员只关系数据 不需要考虑如何重新渲染dom页面
                    this.msg = end + start
                }, 400)
            },
            // 停止定时器
            stop(){
                clearInterval(this.intervalId)
                // 每当清除定时器之后 需要重新把interid置为null
                this.intervalId = null
            }
        }
    })
    // 分析
    // 1，给【点击】按钮 绑定一个点击事件 v-on
    // 2,在按钮的事件处理函数中，写业务代码 拿到msg字符串 然后调用字符串的substring进行字符串截取
    // 把 第一个字符截取出来 放到最后一个位置即可
    // 3，为了实现点击按钮 自动截取功能需要把2中的代码放到一个定时器中
</script>
</body>
</html>

posted on 2021-03-27 20:47 ellaha 阅读(75) 评论(0) 收藏举报

刷新页面返回顶部