zoukankan      html  css  js  c++  java
  • Vue动态新增对象属性

    Vue.set( target, key, value )

    • 参数

      • {Object | Array} target
      • {string | number} key
      • {any} value
    • 返回值:设置的值。

    • 用法

      向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi'),注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

     真实项目应用

    WebApi返回一个Json对象称作A,这个A有四十多个字段,某些字段还是Json对象字符串,即A嵌套着a、b、c Json对象。要在页面响应式处理这些字段值,data就要初始化四十多个字段,噢?不止,因为嵌套了a、b、c Json对象,,那大约六十多个字段。写这么多字段?没必要。

    数据库返回A对象如下(此处截图省略多个字段):

    data设置A对象:A即ConfigFormData里面的的Json对应a、b、c。其他属性动态添加例如TransitPort。  为什么a、b、c一定要初始化呢?往下看。

      ConfigFormData: {
              ConsignorInfoJson: {           
              },
              CustomerInfoJson: {          
              },
              AgentInfoJson: {
               
              },
    

    在html赋值:假如没有初始化ConsignorInfoJson,则ConsignorInfoJson就是undefined。undefined怎么可以点出属性呢,如果不初始化就会编译出错。这里的TransitPort因为没有初始化,因此一开始是undefined。在页面显示空白。

    <br> {{ ConfigFormData.ConsignorInfoJson.Addr=="" ? "":"Addr:"+ConfigFormData.ConsignorInfoJson.Addr}}
    
     <p class="title">中转港</p>
     <p class="content">{{ConfigFormData.TransitPort}}</p>
    

    动态添加属性:

     

     
  • 相关阅读:
    学习java annotation
    自己模拟实现spring IOC原理
    ubuntu16.04~qt 5.8无法输入中文
    尔雅小助手
    ubuntu16.04 python3 安装selenium及环境配置
    A flash of Joy
    数据库大作业--由python+flask
    flask+html selected 根据后台数据设定默认值
    mysql--sqlalchemy.exc.IntegrityError: (IntegrityError) (1215, 'Cannot add foreign key constraint'
    SQL Server 2014连接不到服务器解决方法
  • 原文地址:https://www.cnblogs.com/bibi-feiniaoyuan/p/9476824.html
Copyright © 2011-2022 走看看