zoukankan      html  css  js  c++  java
  • $nextTick的使用

    this.$nextTick方法用于更新数据后,马上进行dom操作,获取dom内容。

    this.$nextTick是异步的。

    更新数据后,视图是更新了,但是获取视图上的新数据的时候,却是原来的。这是就要用nextTick了。

    例子:

    <template>
    
    <div>
         <p ref="test">{{testData}}</p>
    </div>
    </template>
    <script>
    export default {
      name: "Home",
      data () {
        return {
            testData:"原来的数据"
        };
      },
      mounted(){
          //更新数据
          this.testData = "新的数据";
          //更新完数据,进行dom操作,获取的还是原来的数据
          console.log(this.$refs.test.textContent); //原来的数据
          this.$nextTick(()=>{
              console.log(this.$refs.test.textContent); //新的数据
              
          })
          
      }
    }

    一些注意的地方:

    1.this.$refs只能在mounted里使用

    2.获取元素里的文字,是通过this.$refs.xxx.textContent

  • 相关阅读:
    km算法
    HDU 1358
    HDU 3746
    CF 432D
    HDU 4725
    14年百度之星资格赛第四题
    AC自动机
    RMQ
    HDU 4635
    HDU 3667
  • 原文地址:https://www.cnblogs.com/luguankun/p/10867242.html
Copyright © 2011-2022 走看看