vue操作数据增删改查

Vue是一个前端框架，一般不会直接与后端交互，因此增删改查操作应该是指前端页面对前端数据的增删改查。

在Vue中，我们可以使用Vue实例的data属性来存储前端数据，然后使用Vue提供的指令和方法来操作这些数据。

1. 增加数据

我们可以使用Vue提供的v-model指令来实现数据双向绑定，从而实现向数据中添加新的内容。例如：

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">添加</button>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    newItem: "",
    items: ["item1", "item2", "item3"]
  },
  methods: {
    addItem() {
      this.items.push(this.newItem);
      this.newItem = "";
    }
  }
});

2. 删除数据

Vue提供的v-for指令可以用来循环渲染数据列表，我们可以结合v-for和Vue提供的删除方法来实现删除数据的操作。例如：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
      <button @click="removeItem(index)">删除</button>
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    items: ["item1", "item2", "item3"]
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

3. 修改数据

如果我们要修改数据，可以直接通过Vue实例中的数据来修改。例如：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <span v-if="!item.isEditing">{{ item.content }}</span>
      <input v-else v-model="item.content">
      <button @click="toggleEdit(index)">{{ item.isEditing ? "保存" : "编辑" }}</button>
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    items: [
      { content: "item1", isEditing: false },
      { content: "item2", isEditing: false },
      { content: "item3", isEditing: false }
    ]
  },
  methods: {
    toggleEdit(index) {
      this.items[index].isEditing = !this.items[index].isEditing;
    }
  }
});

4. 查询数据

查询数据一般需要结合搜索框等组件来实现，不同的搜索组件实现方法也会有所不同。如果是简单的字符串匹配，我们可以通过Vue提供的计算属性来实现。例如：

<div id="app">
  <input v-model="searchText">
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    searchText: "",
    items: ["item1", "item2", "item3"]
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.includes(this.searchText));
    }
  }
});