vue实现数组列表的修改、删除、过滤

Vue可以通过v-for指令循环渲染数组列表，然后配合v-model指令实现修改，使用splice方法实现删除，使用computed属性实现过滤。

下面是一个简单的示例代码：

<template>
  <div>
    <h2>数组列表</h2>
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">
        <input type="text" v-model="item.name">
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
    <div>
      <input type="text" v-model="filterText">
      <button @click="filterList">过滤</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三' },
        { name: '李四' },
        { name: '王五' },
      ],
      filterText: '',
    };
  },
  methods: {
    deleteItem(index) {
      this.list.splice(index, 1);
    },
    filterList() {
      // 使用computed属性实现过滤
      // 这里需要在data中定义filterText属性
      // 然后在computed中返回过滤后的数组列表
    },
  },
  computed: {
    filteredList() {
      if (!this.filterText) {
        return this.list;
      }
      return this.list.filter(item => item.name.includes(this.filterText));
    },
  },
};
</script>

在上面的代码中，我们使用v-for指令循环渲染数组列表，并且使用v-model指令实现修改。使用deleteItem方法实现删除，该方法使用splice方法将要删除的元素从数组中删除。

使用computed属性实现过滤，我们可以在data中定义一个filterText属性，然后在computed中返回过滤后的数组列表。在filterList方法中，我们可以更新filterText属性的值，然后computed属性会自动更新过滤后的数组列表。

希望这个示例可以帮助你理解Vue中数组列表的修改、删除、过滤。