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最简单的拖拽效果实现代码
Sep 24 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
js事件触发操作实例分析
Jun 21 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 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中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP7内核之Reference详解
2019/03/14 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
python之yield表达式学习
2014/09/02 Python
python实现图片批量压缩程序
2018/07/23 Python
学习python可以干什么
2019/02/26 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python Collatz序列实现过程解析
2019/10/12 Python
tornado+celery的简单使用详解
2019/12/21 Python
django API 中接口的互相调用实例
2020/04/01 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
大学生职业规划前言模板
2013/12/27 职场文书
办护照工作证明范本
2014/01/14 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
环境科学专业求职信
2014/08/04 职场文书
辞职信格式范文
2015/05/13 职场文书
入党申请书格式
2019/06/20 职场文书
python实现局部图像放大
2021/11/17 Python
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang