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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
UCenter Home二次开发指南
2009/05/28 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JS中常用的消息框总结
2018/02/24 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Python 错误和异常小结
2013/10/09 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python常见的pandas用法demo示例
2019/03/16 Python
详解python 中in 的 用法
2019/12/12 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
民主评议政风行风整改方案
2014/09/17 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
大学生十八大感想
2015/08/11 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang