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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jquery操作select大全
Apr 25 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
React Native 混合开发多入口加载方式详解
Sep 23 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中使用Oracle数据库(4)
2006/10/09 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python3.3实现乘法表示例
2014/02/07 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
详解Django admin高级用法
2019/11/06 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
综治工作心得体会
2014/09/11 职场文书
收款委托书
2014/10/14 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
go:垃圾回收GC触发条件详解
2021/04/24 Golang