vue增删改查的实现

Vue增删改查的实现可以通过以下方式实现：

1. 增加：可以使用Vue的v-model指令将输入框的值与数据绑定，然后通过点击按钮触发添加方法，将输入的数据添加到数据列表中。

// HTML
<input v-model="newData">
<button @click="addData">添加</button>

// Vue.js
data() {
  return {
    dataList: [],
    newData: ''
  }
},
methods: {
  addData() {
    this.dataList.push(this.newData);
    this.newData = '';
  }
}

2. 删除：可以通过点击按钮触发删除方法，将选中的数据从数据列表中移除。

// HTML
<ul>
  <li v-for="(data, index) in dataList" :key="index">
    {{ data }}
    <button @click="deleteData(index)">删除</button>
  </li>
</ul>

// Vue.js
methods: {
  deleteData(index) {
    this.dataList.splice(index, 1);
  }
}

3. 修改：可以通过双击列表项触发编辑方法，将列表项的值赋给编辑表单，并保存修改后的值。

// HTML
<ul>
  <li v-for="(data, index) in dataList" :key="index">
    <span v-if="!data.editing" @dblclick="editData(index)">{{ data }}</span>
    <input v-else v-model="dataList[index].value" @blur="saveData(index)">
    <button v-if="data.editing" @click="saveData(index)">保存</button>
  </li>
</ul>

// Vue.js
methods: {
  editData(index) {
    this.dataList[index].editing = true;
  },
  saveData(index) {
    this.dataList[index].editing = false;
  }
}

4. 查询：可以使用Vue的计算属性和过滤器来实现数据的筛选和搜索功能。

// HTML
<input v-model="searchText">
<ul>
  <li v-for="(data, index) in filteredList" :key="index">
    {{ data }}
  </li>
</ul>

// Vue.js
data() {
  return {
    dataList: [],
    searchText: ''
  }
},
computed: {
  filteredList() {
    return this.dataList.filter(data => data.includes(this.searchText));
  }
}