vue中 this.$set的用法详解


Posted in Javascript onSeptember 06, 2019

当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改数据</button>
 </div>
</template>

<script>
export default {
 name: 'App',
 data () {
  return {
   items: [
        { message: "one", id: "1" },
        { message: "two", id: "2" },
        { message: "three", id: "3" }
      ]
  }
 },
 mounted () {
   this.items[0] = { message:'first',id:'4'} //此时对象的值更改了,但是视图没有更新
  // let art = {message:'first',id:"4"}
  // this.$set(this.items,0,art) //$set 可以触发更新视图
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>

<style>

</style>

调用方法: Vue.set( target , key , value)

  • target: 要更改的数据源(可以是一个对象或者数组)
  • key 要更改的具体数据 (索引)
  • value 重新赋的值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript每日必学之多态
Feb 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
在layui中select更改后生效的方法
Sep 05 #Javascript
layui select 禁止点击的实现方法
Sep 05 #Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 #Javascript
layer 刷新某个页面的实现方法
Sep 05 #Javascript
layui中select,radio设置不生效的解决方法
Sep 05 #Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 #Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 #Javascript
You might like
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
php查询内存信息操作示例
2019/05/09 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
拖动时防止选中
2017/02/03 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
Python性能优化技巧
2015/03/09 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python 写一个水果忍者游戏
2021/01/13 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
清明节随笔
2015/08/15 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Pandas自定义选项option设置
2021/07/25 Python
mysql 获取时间方式
2022/03/20 MySQL