Vue中的$set的使用实例代码


Posted in Javascript onOctober 08, 2018

Vue —$set

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

如下代码,给 student对象新增 age 属性

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——钩子函数,实例挂载之后
  this.student.age = 24
}

原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

但是,值得注意的是,网上一些资料写的$set()用法存在一些问题,导致在新接触这个方法的时候会走一些弯路!

错误写法:this.$set(key,value)(ps: 可能是vue1.0的写法)

mounted () {
  this.$set(this.student.age, 24)
}

正确写法:this.$set(this.data,”key”,value')

mounted () {
  this.$set(this.student,"age", 24)
}

总结

以上所述是小编给大家介绍的Vue中的$set的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
javascript实现动态标签云
2015/10/16 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python paramiko模块的使用示例
2018/04/11 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
前台接待岗位职责
2013/12/03 职场文书
采购求职信
2014/03/17 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
低碳环保标语
2014/06/12 职场文书
中秋手机店促销方案
2014/06/16 职场文书
庆七一宣传标语
2014/10/08 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
Python 数据可视化之Seaborn详解
2021/11/02 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers