zoukankan      html  css  js  c++  java
  • vue中$forceUpdate的使用

    vue中的$forceUpdate是强制更新的意思

    数据的绑定都不用我们操心,例如在data中有一个name的变量,你修改它页面的内容就会自动发生变化。

    但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,vue就无法知道发生了改变。

    //父组件 
    <tx-a :info="info"></tx-a>
     data() {
        return {
          info:{}
        }
      },
    //子组件
    <div>
        info:{{ info }} 
        <input :value="info.name" @input="headleChange">
    </div>
      props:{
            info:Object
        },
        methods: {
            headleChange(e){
                this.info.name = e.target.value;
            }
        },
    

      我们尝试直接给info.name赋值,发现页面上没有效果;

        那么就是利用$forceUpdate了,因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。

    方法1:

     headleChange(e){
        this.info.name = e.target.value;
        this.$forceUpdate()
    }

    方法2:

     headleChange(e){
          this.$set(this.info,'name',e.target.value) 
    }
  • 相关阅读:
    3D 立体动态图 代码:
    自由切换 网页上的 ico 图标
    ES6 基本语法:
    JavaScript中class类的介绍
    React_01_ECMAScript6
    使用JS计算前一天和后一天
    Web 前端学习计划
    read
    java对象实例化
    关于为什么java需要垃圾回收
  • 原文地址:https://www.cnblogs.com/caoruichun/p/10769242.html
Copyright © 2011-2022 走看看