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 相关文章推荐
JS动态加载当前时间的方法
Feb 09 Javascript
KnockoutJs快速入门教程
May 16 Javascript
jQuery事件对象总结
Oct 17 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
深入理解PHP中的global
2014/08/19 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python何时应该使用Lambda函数
2019/07/02 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
中文教师求职信
2014/02/22 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python