关闭

vue 中 $set与$delete的使用

时间: 2020-06-17阅读: 642标签: vue

对于对象

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)
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9328

关闭

vue中is的作用和用法

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号“ \\\'\\\' ”包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

谈谈vue的render函数?

使用vue 这么长时间,对vue 对源码了解还是不多,作为一个不甘平庸的前端小白,决定奋起,那么今天我们就来谈谈vue 的render 函数;打开源码,我发现render 函数返回一个VNode; 可是我们并未在模版中写render 呀,这又是一个什么样的过程呢?

Vue中props知识点

如果你一直在阅读有关props内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

vue项目中vux的使用

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。在vue-cli中使用步骤如下:vux2必须配合vux-loader使用,并配置build/webpack.base.conf.js

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!