P5_小结(跑马灯效果):前4节

小结一下:如何定义基本代码结构

image.png

总结区别就是2:

• 插值有闪烁问题在网络不行的情况下需加v-clock和style=>none配合,但是不会覆盖标签内容
• 而text不会有插值表达式的闪烁问题,但是会覆盖标签内容

跑马灯效果

在vm内部如果想要获取内部方法属性都要用this

image.png
image.png

当然可以用es6

()=> 改用箭头函数,箭头函数中的this和外部this保持一致

image.png

重复开启情况

用户万一,一致点击开启浪呢?加判断一开始等于null就开启,不能与null就不一直开启

image.png
image.png
image.png

Body代码

    <div id="app">
        <h3>{{ msg }}</h3>
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '稳住,我能赢I CAN DO WIN!!',
                setIntervalId: null
            },
            methods: {

                lang() {

                    if (this.setIntervalId != null) return

                    this.setIntervalId = setInterval(() => {
                        //获取头开始字符
                        var start = this.msg.substring(0, 1)
                            // 获取后面所有字符
                        var end = this.msg.substring(1)
                            //给msg保存
                        this.msg = end + start
                    }, 100)
                },
                stop: function() {
                    //停止只需要停止定时器
                    clearInterval(this.setIntervalId)
                        //每当清除完定时器后,把这个值重新复制即可
                    this.setIntervalId = null
                }

            }
        })
    </script>