zoukankan      html  css  js  c++  java
  • vue刷新视图的方法,数组,对象改变刷新视图

    在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图。
    受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它。
    但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上

    vue是通过检测get,set才得知数据是否更新的,而对于数组来说,是没有get,set方法的,所以需要我们自己手动触发,需要发送消息通知vue

    1.对象或数组里的某个值改变,视图不刷新,可以考虑将改变的值存在 data变量里

    2.对象改变更新视图的方法:

    a.使用 Object.assign

      this.$data.items = Object.assign({}, this.$data.items);

    b.使用Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上

    Vue.set(obj, '_isHover', true); 或者可以使用vm.$set的实列方法,也是Vue.set方法的别名:
    this.$set(this.$data.items[index], '_isHover', false);

    3.改变数组中对象更新视图的方法
    this.$set(this.List, index, val); //刷新视图
     
    Vue.set(this.contents, index, this.contents[index]);
    set方法具体点击  https://cn.vuejs.org/v2/api/#Vue-set
     
  • 相关阅读:
    22.json&pickle&shelve
    22.BASE_DIR,os,sys
    21.time和random
    21.模块的执行以及__name__
    21.python的模块(Module)和包(Package)
    21. 对文件进行查询修改等操作
    20.装饰器和函数闭包
    19.python基础试题(三)
    19.生产者消费者模型
    19.yield和send的区别
  • 原文地址:https://www.cnblogs.com/s-quan/p/9239582.html
Copyright © 2011-2022 走看看