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 相关文章推荐
jquery 笔记 事件
Nov 02 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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
正则表达式语法
2006/10/09 Javascript
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
演讲稿怎么写
2014/01/07 职场文书
美术教师自我鉴定
2014/02/12 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
学校督导评估方案
2014/06/10 职场文书
伦敦奥运会口号
2014/06/13 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
公司员工手册范本
2015/05/14 职场文书
未婚证明范本
2015/06/15 职场文书
养成教育工作总结
2015/08/13 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server