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 相关文章推荐
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
JS实现音乐导航特效
Jan 06 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
微信小程序canvas实现签名功能
Jan 19 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排序二叉树基本功能实现方法示例
2018/05/26 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
运动会通讯稿500字
2014/02/20 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
文化产业实施方案
2014/06/07 职场文书
销售代理协议书
2014/09/30 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
高三英语教学计划
2015/01/23 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫