VUE 实现动态给对象增加属性,并触发视图更新操作示例


Posted in Javascript onNovember 29, 2019

本文实例讲述了VUE 实现动态给对象增加属性,并触发视图更新操作。分享给大家供大家参考,具体如下:

在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。

我们编写如下代码测试给一个对象动态添加属性:

<div id="app">
  <input v-model="form.amount" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
    i:0,
    form:{}
  },
  methods:{
    demoSet(){
      this.form.amount=this.i++;
      //this.$set(this.form,"amount",this.i++);
    }
  }
  });
</script>

这种方式可以给form增加一个属性,但是不会界面不会响应更新。

正确的做法:

<div id="app">
  <input v-model="form.amount" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
    i:0,
    form:{}
  },
  methods:{
    demoSet(){
      this.$set(this.form,"amount",this.i++);
    }
  }
  });
</script>

这样就可以给对象添加amount 属性了。

这个有什么应用场景呢,比如 data.form 属性很多,其中大部分是不需要要的,这时候,可以使用这种方法实现动态添加需要的属性。

需要注意的是,这种方式是不能给根数据添加属性的,比如:

<div id="app">
  <input v-model="name" /> 
  <input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
  el: "#app",
  data: {
  },
  methods:{
    demoSet(){
      this.$set(this,"name","ray");
    }
  }
  });
</script>

这种方式给data 增加一个 name 属性是无效的。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
jquery实现网页定位导航
Aug 23 Javascript
js 轮播效果实例分享
Dec 28 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
js中关于Blob对象的介绍与使用
Nov 29 #Javascript
js blob类型url的视频下载问题的解决
Nov 29 #Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 #Javascript
VuePress 中如何增加用户登录功能
Nov 29 #Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 #Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 #Javascript
Vue基础配置讲解
Nov 29 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
基于Python测试程序是否有错误
2020/05/16 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
首都博物馆观后感
2015/06/05 职场文书
整脏治乱工作简报
2015/07/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL