vue 修改for循环中list值在页面有效果

在 Vue 中，使用 v-for 指令进行循环渲染列表时，如果要修改列表中的某个元素的值，可以直接通过修改该元素在列表中的索引位置来实现。例如：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
      <button @click="updateItem(index)">Update</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C']
    }
  },
  methods: {
    updateItem(index) {
      this.list[index] = 'New Value'
    }
  }
}
</script>

在上面的示例中，我们给列表中的每个元素添加了一个 "Update" 按钮，当点击该按钮时，就会触发 `updateItem` 方法，该方法通过修改 `list` 数组中对应索引位置的元素值实现更新。由于数组是引用类型，在修改后 Vue 会自动检测到数据的变化并更新页面。