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-cli3的正确姿势

    详解项目升级到vue-cli3的正确姿势

    这篇文章主要介绍了详解项目升级到vue-cli3的正确姿势,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue如何加载本地json数据

    vue如何加载本地json数据

    这篇文章主要介绍了vue如何加载本地json数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue extend使用示例深入分析

    Vue extend使用示例深入分析

    这篇文章主要介绍了Vue.extend使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue props数据传递类型限制方式

    vue props数据传递类型限制方式

    这篇文章主要介绍了vue props数据传递类型限制方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue文件代码缩进以及格式化代码方式[自定义]

    vue文件代码缩进以及格式化代码方式[自定义]

    这篇文章主要介绍了vue文件代码缩进以及格式化代码方式[自定义],具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2.0中set添加属性后视图不能更新的解决办法

    vue2.0中set添加属性后视图不能更新的解决办法

    在本文里我们给大家整理了关于vue2.0中set添加属性后视图不能更新的解决办法以及相关知识点,需要的朋友们学习下。
    2019-02-02
  • Vue computed计算属性总结记录

    Vue computed计算属性总结记录

    在vue中,有时候你需要对data中的数据进行处理,或者对抓取的数据进行处理之后再挂载呈现到标签中,这时候你就需要计算属性了,当然看到这里你可能还是不了解那下面我举几个实例并附代码解释
    2023-02-02
  • vue中移动端调取本地的复制的文本方式

    vue中移动端调取本地的复制的文本方式

    这篇文章主要介绍了vue中移动端调取本地的复制的文本方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解Vue中过度动画效果应用

    详解Vue中过度动画效果应用

    这篇文章主要介绍了详解Vue中过度动画效果应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue.js中的图片引用路径的方式

    Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式,感兴趣的朋友一起看看吧
    2017-07-07

最新评论