vue中 this.$set的用法

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。<template><div id="app2"><p v-for="item in items" :key="item.id">{{item.message}}</p><button class="btn" @click="handClick()">更改数据</button>    </div>
</template><script>
export default {data() {return {items: [{ message: "one", id: "1" },{ message: "two", id: "2" },{ message: "three", id: "3" }]};},mounted(){this.items[0]={message:"测试",id:"4"};  //此时对象的值更改了，但是视图没有更新this.$set(this.items,0,{message:"测试",id:"4"})； //$set可以触发更新视图console.log(this.items)},methods: {// 调用方法：Vue.set( target, key, value )// target：要更改的数据源(可以是对象或者数组)// key：要更改的具体数据// value ：重新赋的值
        handClick() {//Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到itemsthis.$set(this.items, 0, { message: "更改one的值", id: "0" });},}
};
</script><style>
</style>

转载于:https://www.cnblogs.com/huanhuan55/p/10634793.html

vue中 this.$set的用法相关推荐

「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
vue中的keep-alive的用法详细讲解
问题描述(什么是keep-alive) keep-alive顾名思义,保持活跃.保持谁活跃呢? 首先我们知道,因为vue就是组件化编程,一个.vue文件就是一个组件.就像万事万物一样,都有从出生到消亡 ...
Vue中JSX的基本用法
基本用法首先需要约定一下,使用JSX组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于vue-styled-components写在同一个文件中,复杂的建议放在单独的_Styles.js ...
vue中引入路径的用法
一.Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 -/ -/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对 ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
VUE中$refs的基本用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素 2.ref 加在子组件上,用this.r e f s . ( r e f 值 ) 获取 ...
Vue中v-on的基础用法、参数传递和修饰符
目录一.v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可 ...
vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析成对出现:provide和inject是成对出现的作用:用于父组件向子孙组件传递数据使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...

vue中 this.$set的用法

vue中 this.$set的用法相关推荐

最新文章

热门文章