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

 更新时间:2022年07月27日 16:30:29   作者:岩崎理奈  
这篇文章主要介绍了vue对象添加属性(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"})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 去掉vue 中的代码规范检测两种方法(Eslint验证)

    去掉vue 中的代码规范检测两种方法(Eslint验证)

    我们在使用vue 脚手架时,为了规范团队的代码格式,会有一个代码规范检测,如果不符合规范就会报错,有时候我们不想按照他的规范去写。这时我们需要关闭,这里脚本之家小编给大家带来了去掉vue 中的代码规范检测两种方法(Eslint验证),一起看看吧
    2018-03-03
  • vue实现列表拖拽排序的功能

    vue实现列表拖拽排序的功能

    这篇文章主要介绍了vue实现列表拖拽排序的功能,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • 深入理解vue输入框字符限制的优化设计方案

    深入理解vue输入框字符限制的优化设计方案

    限制输入框字符是一项需要结合技术实现与用户体验的综合设计,通过实时限制、提交校验与性能优化,开发者可以高效解决输入限制问题,同时提升用户满意度和数据安全性,本文给大家介绍vue输入框字符限制的优化设计,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • Vue不能观察到数组length的变化

    Vue不能观察到数组length的变化

    因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下
    2018-06-06
  • vue+element实现打印页面功能

    vue+element实现打印页面功能

    这篇文章主要介绍了vue+element实现打印页面功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 如何使用elementUI组件实现表格的分页及搜索功能

    如何使用elementUI组件实现表格的分页及搜索功能

    最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下
    2023-03-03
  • 深入解析vue中的权限管理

    深入解析vue中的权限管理

    权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源,这篇文章主要介绍了vue的权限管理的相关知识,需要的朋友可以参考下
    2022-06-06
  • Vue项目添加动态浏览器头部title的方法

    Vue项目添加动态浏览器头部title的方法

    这篇文章主要介绍了Vue项目添加动态浏览器头部title的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue3通用API功能示例剖析

    Vue3通用API功能示例剖析

    这篇文章主要为大家介绍了Vue3通用API功能示例剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue实现联动选择

    vue实现联动选择

    这篇文章主要为大家详细介绍了vue实现联动选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论