zoukankan      html  css  js  c++  java
  • $nextTick()

    vue不是数据发生改变之后DOM立即发生改变,而是按一定的策略进行DOM更新
    $nextTick()是在下次DOM更新之后,执行延迟回调, 在修改数据之后使用$nextTick,则可以在回调中获得更新的DOM
    Vue模板中直接在根元素中进行插值,然后在实例方法中使用了this.$el.textContent来获得更新之后的DOM

    new Vue({
      // …
      methods: {
        // …
        example: function () {
          // modify data
          this.message = 'changed'
          // DOM is not updated yet
          this.$nextTick(function () {
            // DOM is now updated
            // `this` is bound to the current instance
            this.doSomethingElse()
          })
        }
      }
    })

    例子:

    <div id="app">
                <div ref="msgDiv">{{msg}}</div>
                <div>msg1:{{msg1}}</div>
                <div>msg2:{{msg2}}</div>
                <div>msg3:{{msg3}}</div>
                <button @click="showMsg">button</button>
            </div>
    new Vue({
        el:'#app',
            data:{
                msg:'test',
                msg1:'',
                msg2:'',
                msg3:''
            },
            methods:{
                showMsg(){
                    this.msg='你好'
                    this.msg1=this.$refs.msgDiv.innerHTML
                    this.$nextTick(()=>{
                        this.msg2 = this.$refs.msgDiv.innerHTML
                    })
                    this.msg3 = this.$refs.msgDiv.innerHTML
                }
            }
        })

    还有一种场景,你有一个jQuery插件,希望在DOM元素中某些属性发生变化后重新使用该插件,这时候就需要在$nextTick的回调函数中执行重应用插件的方法





  • 相关阅读:
    js_类数组转化为数组
    js_立即执行函数
    react-router详解
    闭包_详解
    react_生命周期执行顺序
    Git-Gitlab-Genkins持续集成
    java 通用查询
    java-JDBC事务
    java中的session和cookie实现购物车的结算和清空
    servlet服务器
  • 原文地址:https://www.cnblogs.com/liuwanyue/p/8594925.html
Copyright © 2011-2022 走看看