Vue 列表页面的增删改查操作

在前端开发中，Vue.js 凭借其简洁易用的特点被广泛应用。而列表页面的增删改查操作是很多项目中必不可少的功能，下面我们就来详细探讨一下如何在 Vue 中实现这些操作。

首先是“增”操作。我们可以通过创建一个表单，使用 Vue 的双向数据绑定将用户输入的值存储在数据对象中。当用户点击“添加”按钮时，将这些数据添加到列表数组中。例如：

<template>
  <div>
    <form @submit.prevent="addItem">
      <input v-model="newItem" placeholder="输入新项">
      <button type="submit">添加</button>
    </form>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      list: []
    }
  },
  methods: {
    addItem() {
      this.list.push(this.newItem);
      this.newItem = '';
    }
  }
}
</script>

“删”操作则相对简单。我们可以为每个列表项添加一个删除按钮，当点击按钮时，通过 splice 方法从列表数组中移除该项。如下：

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

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

“改”操作需要先进入编辑状态，我们可以通过一个标志位来控制是否处于编辑模式。点击编辑按钮时，切换标志位并将当前项的值填充到输入框中，用户修改后点击保存按钮更新列表项。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <span v-if="!editing[index]">{{ item }}</span>
        <input v-if="editing[index]" v-model="editedItems[index]" @blur="saveEdit(index)">
        <button @click="editItem(index)">编辑</button>
        <button @click="saveEdit(index)" v-if="editing[index]">保存</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      editing: [],
      editedItems: []
    }
  },
  methods: {
    editItem(index) {
      this.editing[index] = true;
      this.editedItems[index] = this.list[index];
    },
    saveEdit(index) {
      this.list[index] = this.editedItems[index];
      this.editing[index] = false;
    }
  }
}
</script>

最后是“查”操作。我们可以添加一个搜索框，使用 filter 方法对列表进行过滤，展示符合条件的项。

<template>
  <div>
    <input v-model="searchText" placeholder="搜索">
    <ul>
      <li v-for="item in filteredList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      searchText: ''
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.searchText));
    }
  }
}
</script>

通过以上步骤，我们就完成了 Vue 列表页面的增删改查操作，这些操作能够极大提升用户体验，让数据管理更加便捷高效。