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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 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
其他功能
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php session劫持和防范的方法
2013/11/12 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
json数据的列循环示例
2013/09/06 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python查找第k小元素代码分享
2013/12/18 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
详解python播放音频的三种方法
2019/09/23 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
医药营销个人求职信范文
2014/02/07 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
演讲稿格式范文
2014/05/19 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS