返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue对象添加属性(key:value)、显示和删除属性方式
  • 719
分享到

vue对象添加属性(key:value)、显示和删除属性方式

2024-04-02 19:04:59 719人浏览 泡泡鱼
摘要

目录对象添加属性(key:value)、显示和删除属性效果图添加属性 删除属性不能检测到对象属性的添加或删除问题有三种解决方案 对象添加属性(key:value)

对象添加属性(key:value)、显示和删除属性

效果图

<FORMItem label="输入项填充内容 :" prop="value" :rules="name1" style="margin-top: 20px">
            <Button type="success" @click="addKey">新增</Button>
            <table class="table">
              <tr>
                <th>key值</th>
                <th>value值</th>
                <th>操作</th>
              </tr>
              <tr v-for="(item,key) in keyValues" v-if="keyValueShow">
              <td>{{key}}</td>
              <td>{{keyValues[key]}}</td>
              <td><Button type="error" @click="keyDelete(key)">删除</Button></td>
            </tr>
              <tr>
                <td>
                  <FormItem>
                    <Input class="application-ipt" type="text" placeholder="输入内容" v-model="keyValue.key"></Input>
                  </FormItem>
                </td>
                <td colspan="2">
                  <FormItem>
                    <Input class="application-ipt" type="text" placeholder="输入内容" v-model="keyValue.value"></Input>
                  </FormItem>
                </td>
              </tr>
            </table>
          </FormItem>

添加属性 

 addKey(){
            if(this.keyValue.key==''){
              this.$Message.error('请输入key值');
            }else if(this.keyValue.value==''){
              this.$Message.error('请输入value值');
            }else{
              if(JSON.stringify(this.keyValues) !== '{}'){
                for(var k in this.keyValues){
                  if(k == this.keyValue.key) {
                    this.$Message.error('key值不能重复');
                    this.keyValue.key=''
                    return
                  }else{
                    this.keyValues[this.keyValue.key]=this.keyValue.value
                    this.keyValue.key=''
                    this.keyValue.value=''
                    //可以强制重新渲染页面
                    this.$forceUpdate();
                  }
                }
              }else{
                this.keyValues[this.keyValue.key]=this.keyValue.value
                this.keyValue.key=''
                this.keyValue.value=''
                this.$forceUpdate();
              }
            }
        },

删除属性

 keyDelete(key){
          var keyValues = this.keyValues
          for (var k in keyValues) {
            console.log(k,key)
            if(k==key){
              delete keyValues[k]
 
            }
            this.keyValues=keyValues
            this.$forceUpdate();
          }
        },

不能检测到对象属性的添加或删除问题

官网介绍到:受现代 javascript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

在这里插入图片描述

上面的a是响应式的,所以a的改变后会自动渲染页面;

但是b是在vm实例创建之后添加的属性,所以他不是响应式的,当我们改变b的值的时候,通过DevTool看到的数据并不会改变,除非我们在DevTool中刷新数据,而且页面也不会刷新。 

有三种解决方案 

  • 方案一:利用Vue.set(object,key,value)
Vue.set(vm.obj,"sex","man")
  • 方案二:利用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
  • 方案三:利用Object.assign({},this.obj)
this.obj.sex = "man";this.obj = Object.assign({},this.obj)
  • 或者下面方式
this.obj = Object.assign({ },this.obj,{"sex","man"})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue对象添加属性(key:value)、显示和删除属性方式

本文链接: https://lsjlt.com/news/165425.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue对象添加属性(key:value)、显示和删除属性方式
    目录对象添加属性(key:value)、显示和删除属性效果图添加属性 删除属性不能检测到对象属性的添加或删除问题有三种解决方案 对象添加属性(key:value)...
    99+
    2024-04-02
  • JavaScript中对象属性和添加新属性的示例分析
    这篇文章主要为大家展示了“JavaScript中对象属性和添加新属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中对象属性和添加...
    99+
    2024-04-02
  • vue如何动态添加对象属性
    在vue中态添加对象属性的方法:1.使用this.$set(obj,key,value)方法添加;2.使用索引值添加;具体方法如下:使用this.$set(obj,key,value)方法对基本数据类型和对象动态添加属性this.$set(...
    99+
    2024-04-02
  • javascript删除对象属性的方法
    小编给大家分享一下javascript删除对象属性的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!js删除对象属性的方法:1、使用deleteProperty方法,语法“Reflect.deleteProperty(数...
    99+
    2023-06-14
  • vue响应式Object代理对象的修改和删除属性
    目录正文setdelete正文 上一篇文章我们学习了如何代理对象的读取,下面我们学习如何代理对象的修改和删除属性。 set set就是修改代理的属性,按照我们之前写的reactive...
    99+
    2022-11-13
    vue响应式Object修改删除 vue Object属性
  • java如何删除对象属性
    在Java中,要删除对象的属性,可以使用以下方法:1. 将属性设置为null:可以将属性的引用设置为null,表示对象不再引用该属性...
    99+
    2023-10-18
    java
  • vue中怎么给对象动态添加属性和值
    vue中怎么给对象动态添加属性和值,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、背景介绍:在vue中请求接口中,一个请求方法可能对应后台两...
    99+
    2024-04-02
  • JavaScript中怎么删除对象属性
    今天就跟大家聊聊有关JavaScript中怎么删除对象属性,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 1.将属性设置为 undefin...
    99+
    2024-04-02
  • Vue.delete()删除对象的属性说明
    目录Vue.delete()删除对象的属性delete和Vue.delete的区别Vue.delete()删除对象的属性 Vue.delete( target, key ) da...
    99+
    2024-04-02
  • javascript如何删除对象的属性
    这篇文章主要介绍了javascript如何删除对象的属性,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在javascript中,可以使用delete运算符来删除对象的属性,它...
    99+
    2023-06-15
  • 如何使用es6删除对象属性
    本篇文章为大家展示了如何使用es6删除对象属性,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。es6删除对象属性的方法:使用delete操作符,语法“delete 对...
    99+
    2024-04-02
  • jquery如何增加和删除属性
    这篇“jquery如何增加和删除属性”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“jque...
    99+
    2024-04-02
  • js删除对象属性的多种方法举例
    目录1.将属性设置为 undefined2.使用 delete 操作符3.使用对象解构4.使用Reflect5.删除数组元素补充:delete 运算符删除对以前定义的对象属性或方法的...
    99+
    2022-12-09
    js删除对象属性的方法 js删除某一个属性 js delete删除对象属性
  • 怎么在JavaScript中为对象添加属性
    本篇文章给大家分享的是有关怎么在JavaScript中为对象添加属性,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JavaScript是什么JavaScript是一种直译式的脚...
    99+
    2023-06-14
  • js中如何往对象中添加属性
    目录往对象中添加属性给对象动态添加属性的2种方法需求分析下面是2中方法给对象动态添加属性往对象中添加属性 首先,定义一个要添加进去的属性及属性值; let obj = {'a':12...
    99+
    2024-04-02
  • 怎么用javascript对象删除一个属性
    这篇文章主要介绍“怎么用javascript对象删除一个属性”,在日常操作中,相信很多人在怎么用javascript对象删除一个属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • JavaScript如何删除对象的某个属性
    这篇文章主要介绍“JavaScript如何删除对象的某个属性”,在日常操作中,相信很多人在JavaScript如何删除对象的某个属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • jquery如何删除元素对象的属性
    本篇内容介绍了“jquery如何删除元素对象的属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • JavaScript怎么删除对象的某个属性
    小编给大家分享一下JavaScript怎么删除对象的某个属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript有什么特点1、js属于一种解释性脚本...
    99+
    2023-06-15
  • es6如何删除对象的某个属性
    在ES6中,可以使用`delete`关键字来删除对象的某个属性。具体语法如下:```javascriptdelete obj.pro...
    99+
    2023-10-09
    es6
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作