vue中$set与$delete的使用及说明

 更新时间:2023年10月27日 08:59:48   作者:高先生的猫  
这篇文章主要介绍了vue中$set与$delete的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

对于对象

vue无法检测property的添加或移除,由于vue会在初始化实例时对property执行getter/setter转换,所以propterty必须在data对象上存在才能让vue将它转换为响应式的。

例如:

var vm = new vue({
  data:{
    a:1
  }
})
 
// `vm.a` 是响应式的
 
vm.b = 2
// `vm.b` 是非响应式的

对于已经创建的实例,vue不允许添加根级别的响应式属性,但是可以使用

vue.set(vm.someObject, "b" ,2)

也可以使用vm.$set实例方法,这也是全局vue.set方法的别名

this.$set(this.someObject, "b", 2)

如果为已有的对象赋值多个新property

this.someObject = Object.assign({},this.someObject,{a:1,b:2})

例子:

            <div class>
              参数名:
              <el-input style="width:170px" v-model="parKey" class="margin_r20"></el-input>参数值:
              <el-input style="width:170px" v-model="parName" class="margin_r10"></el-input>
              <el-button type="primary" size="medium" @click="addPar">增加</el-button>
            </div>参数列表
            <ul class="parList">
              <li v-for="(value, name, index) in AddEditeDialog.netTypeParam" :key="index">
                {{name}} : {{value}}
                <el-button size="mini" round @click="delPar(name)" class="pull-right">删除</el-button>
              </li>
            </ul>
    addPar() {
      this.parKey = this.parKey.trim();
      this.parName = this.parName.trim();    
      this.$set(this.AddEditeDialog.netTypeParam, this.parKey, this.parName);
      // 不能写成this.AddEditeDialog.netTypeParam[this.parKey] = this.parKey
      this.parKey = "";
      this.parName = "";
    },
    delPar(name) {
      this.$delete(this.AddEditeDialog.netTypeParam, name);
    },

对于数组

vue不能检测以下数组的变动

vm.items[indexOfItem] = newValue
vm.items.length = newLength
var vm = new vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
vm.items[indexOfItem] = newvue
// 可以采用下面2种方法实现响应式
Vue.set(vm.items, indexOfItem, newValue) || vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
 
vm.items.length = newLength
// 可以采用下面方法实现响应式
vm.items.splice(newLenght)

总结

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

相关文章

  • vue-cli 目录结构详细讲解总结

    vue-cli 目录结构详细讲解总结

    这篇文章主要介绍了vue-cli 目录结构详细讲解总结,详细的介绍了整个项目的目录以及目录文件的用法,非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • vue3+ts项目中.env配置环境变量与情景配置方式

    vue3+ts项目中.env配置环境变量与情景配置方式

    本文介绍了如何在Vite中配置环境变量和不同的运行模式,环境变量文件以.env开头,仅VITE_前缀的变量会被暴露,开发模式加载.env.development,生产模式加载.env.production,NODE_ENV用于区分开发和生产环境
    2024-10-10
  • 详解vue使用Echarts画柱状图

    详解vue使用Echarts画柱状图

    这篇文章主要为大家介绍了vue使用Echarts画柱状图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue 计算属性之姓名案例的三种实现方法

    Vue 计算属性之姓名案例的三种实现方法

    这篇文章主要介绍了Vue 计算属性之姓名案例的三种实现方法,计算属性实现、methods实现和插值语法实现,下面文章具体介绍,需要的小伙伴可以参考一下
    2022-05-05
  • Vue2+Quill富文本编辑器详解

    Vue2+Quill富文本编辑器详解

    文章指出Quill 2.0.0-dev.4与2.0.2版本存在兼容性问题,原因未知,主要步骤包括引入依赖、创建编辑器组件、使用及效果测试
    2025-08-08
  • vue总线机制(bus)知识点详解

    vue总线机制(bus)知识点详解

    在本篇文章中小编给大家整理的是关于vue总线机制(bus)知识点总结,有兴趣的朋友们可以跟着学习下。
    2020-05-05
  • 详解Vue2 watch监听props的值

    详解Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的,本文给大家介绍Vue2 watch监听props的值,感兴趣的朋友一起看看吧
    2023-12-12
  • 解决vue动态为数据添加新属性遇到的问题

    解决vue动态为数据添加新属性遇到的问题

    今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解element-ui 组件el-autocomplete使用踩坑记录

    详解element-ui 组件el-autocomplete使用踩坑记录

    最近使用了el-autocomplete组件,本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

    Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

    这篇文章主要介绍了Vue+Koa+MongoDB从零打造一个任务管理系统,本文通过图文实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论