当前位置: 首页 > 编程笔记 >

vue中 this.$set的用法详解

竺辉
2023-03-14
本文向大家介绍vue中 this.$set的用法详解,包括了vue中 this.$set的用法详解的使用技巧和注意事项,需要的朋友参考一下

当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中this的用法详解,包括了Javascript中this的用法详解的使用技巧和注意事项,需要的朋友参考一下 前些日子面试的时候用到了this,面试官说我的理解有点偏差,回来看了下书和一些博客,做了点测试,发现自己的理解的确有误 1.全局变量 应该是最常用的吧,函数中调用一个this,这里其实就是全局变量 输出0就是因为this指向的是全局 2.构造函数 这是我比

  • 本文向大家介绍Java 中This用法的实例详解,包括了Java 中This用法的实例详解的使用技巧和注意事项,需要的朋友参考一下  Java 中This用法的实例详解 用类名定义一个变量的时候,定义的只是一个引用,外面可以通过这个引用来访问这个类里面的属性和方法。     那们类里面是够也应该有一个引用来访问自己的属性和方法纳?     呵呵,Java提供了一个很好的东西,就是 this 对象,

  • 本文向大家介绍vue 中this.$set 动态绑定数据的案例讲解,包括了vue 中this.$set 动态绑定数据的案例讲解的使用技巧和注意事项,需要的朋友参考一下 感觉网上对this.$set的讲解乱糟糟的,我来总结一下对它单个数据、对象、数组、json数据的绑定. 话不多说直接上代码: 补充:Vue 使用$set动态给数据设置属性 在实际的开发过程中,给表单元素绑定model的时候,绑定的元

  • 本文向大家介绍js中this用法实例详解,包括了js中this用法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js中this用法。分享给大家供大家参考。具体如下: 1. 指向window 全局变量 全局函数 2. 指向该对象(在全局里面this指向window,在某个对象里面this指向该对象,在闭包里面this指向window) 3. 用apply,call改变函数的this

  • 本文向大家介绍javascript中this用法实例详解,包括了javascript中this用法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript中this用法。分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式。函数有以下几种调用方式:作为对象方法调用、作为函数调用

  • 本文向大家介绍详解JavaScript中this关键字的用法,包括了详解JavaScript中this关键字的用法的使用技巧和注意事项,需要的朋友参考一下 this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象(关于环境对象我们会在文章最后作补充说明),在调用函数前this的值并不确定,不同的调用方式会导致this值的改变。 记住:函数名仅仅是一个包含指针的变量而已。因此即使是在