zoukankan      html  css  js  c++  java
  • Vue

    Vue.js 推荐以“数据驱动”的方式思考,避免直接接触DOM。但是有时候会遇到这种情况:当在数据变化后,我们需要操作相应的DOM,如下面的例子:

    <template>
        <div>
          <ul>
            <li v-for="(item,index) in message" :key="index" ref="list">{{item}}</li>
          </ul>
        </div>
    </template>
    
    <script>
    export default{
        data(){
            return {
                message:[]
            }
        },
        mounted(){
            this.message = [1,2,3,4];
            console.log(this.$refs.list); //无dom元素输出为空
        }
    }
    </script>

    这种情况该怎么处理呢?

      由于Vue 异步执行 DOM 更新:即数据变化之后,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变;从而你能看到页面这个时候已经显示数据了,但是操作dom的时候无输出,表明此时DOM还没有更新。如果想要在此时操作DOM的情况,可以使用一下两种方式:

    1.setTimeout

      setTimeout(()=>{
        console.log(this.$refs.list);
      },20)
     
    2.Vue.nextTick(callback)
      this.$nextTick(function(){
        console.log(this.$refs.list);
      })
     
    以上两种方式都是在DOM更新完成后调用
     
    了解更多原理,可参照:https://www.cnblogs.com/xujiazheng/p/6852124.html
  • 相关阅读:
    Unity-国际版下载
    Js数值处理
    Vue,部署通过Url指向dist里的index, 通过IIS 7.0及以上部署,添加 注册托管代码模块
    反编译
    Node 命令
    VUE开发命令
    VS2017发布到部署网站
    谷歌浏览器提示您的连接不是私密连接
    iis,配置
    VS开发android
  • 原文地址:https://www.cnblogs.com/changxue/p/9134164.html
Copyright © 2011-2022 走看看