vue改变循环遍历后的数据实例

要改变vue中循环遍历后的数据实例，一般会采用以下两种方式：

1.直接修改数组

vue中使用v-for进行循环遍历时，实际上是遍历数组来生成页面内容。因此，我们可以直接对绑定的数据数组进行修改，来达到改变循环遍历后的数据实例的目的。下面是一个示例：

<template>
  <div>
    <p v-for="(item, index) in items" :key="index">
      {{ item }}
    </p>
    <button @click="changeItem">改变第2个数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["第1个数据", "第2个数据", "第3个数据", "第4个数据"],
    };
  },
  methods: {
    changeItem() {
      this.items[1] = "改变后的第2个数据";
    },
  },
};
</script>

这个示例中，我们使用v-for遍历数据数组items，并生成相应的页面内容。在页面上，我们也放置了一个按钮，点击这个按钮会调用changeItem方法，方法中就直接修改了数组中的第二个元素。这样，vue就会重新渲染页面，展示改变后的数据。

2.使用Vue.set方法

虽然直接修改数据数组是一种简单有效的方式，但是它并不总是生效，特别是在使用vue开发大型应用时，可能会遇到一些特殊情况。为了应对这种情况，vue提供了Vue.set方法，可确保改变数据实例后，vue能正确地更新DOM。下面是一个示例：

<template>
  <div>
    <p v-for="(item, index) in items" :key="index">
      {{ item }}
    </p>
    <button @click="changeItem">改变第2个数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["第1个数据", "第2个数据", "第3个数据", "第4个数据"],
    };
  },
  methods: {
    changeItem() {
      this.$set(this.items, 1, "改变后的第2个数据");
    },
  },
};
</script>

这个示例中，我们也使用v-for遍历数据数组items，并生成相应的页面内容。在页面上，我们同样放置了一个按钮，点击这个按钮会调用changeItem方法。与第一种方式不同的是，我们使用了this.$set方法来改变数据实例。它的第一个参数是要修改的数组，第二个参数是要修改的元素下标，第三个参数是修改后的内容。这样，vue就能确保改变后的数据实例能够正确地更新DOM。