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导航菜单(自写)简单大方
Mar 28 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
javascript基本类型详解
Nov 28 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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中static静态变量的使用方法详解
2010/06/04 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
使用TensorFlow实现SVM
2018/09/06 Python
python3实现表白神器
2019/04/09 Python
Python向excel中写入数据的方法
2019/05/05 Python
python中数据库like模糊查询方式
2020/03/02 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
售前工程师职业生涯规划
2014/03/02 职场文书
领导班子对照检查材料
2014/09/22 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
技术员岗位职责
2015/02/04 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android