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设计模式之解释器模式详解
Jun 05 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
在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
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Django分页功能的实现代码详解
2019/07/29 Python
python多线程同步实例教程
2019/08/11 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python开发一款翻译工具
2020/10/10 Python
Python descriptor(描述符)的实现
2020/11/15 Python
物流专业大学生求职信范文
2013/10/28 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
运动会通讯稿300字
2014/02/02 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
运动会方阵口号
2014/06/07 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
简单租房协议书
2014/10/21 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
python spilt()分隔字符串的实现示例
2021/05/21 Python