Vue.set的使用

最新推荐文章于 2025-06-09 22:17:40 发布

weixin_49035434

最新推荐文章于 2025-06-09 22:17:40 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49035434/article/details/121691973

本文介绍了如何在Vue应用中使用Vue.set方法来动态改变数组中的元素及其属性，并演示了如何通过点击按钮实现列表数据的新增操作。重点讲解了`this.$set`在处理JavaScript数据变动检测中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里我定义了一个列表数据，我将通过三个不同的按钮来控制列表数据。
调用方法：Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

<template>
  <div id="app">
    <p v-for="item in items" :key="item.id">
      {{item.message}}
    </p>
    <button class="btn" @click="btn2Click">动态赋值</button><br/>    
    <button class="btn" @click="btn3Click">为data新增属性</button>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        mNumber: 0,
        items:[
            {message:"Test 1",id:"1"},
            {message:"Test 2",id:"2"},
            {message:"Test 3",id:"3"}
        ]
      };
    },
    methods: {
      btn2Click() {
        // 如果直接赋值,打印出来的数据确实是变化了,但是试图没有更新,forceUpdate更新一下也可以
        // this.items[0] = {message:"Test change",id:"1"}
        // console.log(this.items)
        // this.$forceUpdate()
        // 由于 JavaScript 的限制，Vue 不能检测出数据的改变，所以当我们需要动态改变数据的时候，Vue.set()完全可以满足我们的需求。
        
        // 改变items中索引为0的数据,          修改后的值
        this.$set(this.items, 0, {message:"test 1 被改变了",id:"1"})
      },
      btn3Click() {
         let itemLen = this.items.length;
         console.log(itemLen);
         this.$set(this.items, itemLen, {message: "新增内容", id: `${itemLen+1}`})
         console.log(this.items);

      }
    }
}