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 tools 系列 scrollable学习
Sep 06 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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中Collection 类的设计
2013/06/21 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
教师队伍管理制度
2014/01/14 职场文书
个人优缺点自我评价
2014/01/27 职场文书
会计人员岗位职责
2014/03/19 职场文书
九年级化学教学反思
2016/02/22 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书