vue 通过v-for渲染的列表中如何在添加一个数组

要向渲染的 Vue 列表中添加一个新的数组元素，可以直接向原数组中添加新元素即可。Vue 会检测到数组的变化并自动更新视图。例如，假设已经有一个数组 `list` 用于渲染列表：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem">添加新元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '元素1' },
        { id: 2, name: '元素2' },
        { id: 3, name: '元素3' }
      ]
    }
  },
  methods: {
    addItem() {
      const newItem = { id: 4, name: '新元素' }
      this.list.push(newItem)
    }
  }
}
</script>

在上面的代码中，当我们点击“添加新元素”的按钮时，`addItem` 方法会向 `list` 数组中添加一个新元素，然后 Vue 会自动更新列表视图。