vue list 函数的用法

Vue.js中的`v-for`指令可以用来遍历数组或对象，并生成对应的DOM。在实现这个功能时，我们需要配合使用Vue.js提供的`Vue.set()`函数或`vm.$set()`方法来实现动态添加或删除元素。

下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["item1", "item2", "item3"],
    };
  },
  methods: {
    addItem() {
      // 使用Vue.set()或vm.$set()方法添加元素
      this.$set(this.list, this.list.length, "new item");
    },
    removeItem(index) {
      // 使用Vue.set()或vm.$set()方法删除元素
      this.$set(this.list, index, undefined);
      this.list.splice(index, 1);
    },
  },
};
</script>

在上面的示例中，我们使用`v-for`指令来遍历`list`数组，并生成对应的DOM元素。为了实现添加和删除元素的功能，我们分别定义了`addItem()`和`removeItem()`方法，并在模板中通过按钮来调用这些方法。在`addItem()`方法中，我们通过`Vue.set()`或`vm.$set()`方法来添加新元素；在`removeItem()`方法中，我们同样使用`Vue.set()`或`vm.$set()`方法来删除元素，并且还需要调用`splice()`方法来真正地删除元素。