随着vue.js的越来越流行，vue的应用程序需求也必然会更多。随着列表页在大多数web应用程序中的重要性不断增加，vue列表页增删改查不仅成为了一个非常重要的应用程序要求，而且也是vue学习者最应该学习的东西之一。本文将介绍如何使用vue.js进行列表页的基本增删改查操作。
准备工作：
在开始本文之前，请确保您对html和javascript的基本知识有足够的了解，因为我们将使用vue.js、html和javascript来创建列表应用程序。
本文涵盖以下主题：
1、创建vue应用程序
2、创建列表
3、添加新条目
4、编辑条目
5、删除条目
1、创建vue应用程序
我们需要安装vue.js。可以通过cdn或通过npm包管理器进行安装。如果您想通过cdn进行安装，可以从以下网址获取：https://unpkg.com/vue@next/dist/vue.global.js。如果您想使用npm包管理器进行安装，则可以在终端中使用以下命令：
npm install vue
安装完成后，现在我们可以创建一个vue实例，如下：
const app = vue.createapp({});
接下来，我们将在实例中定义模板、数据、方法和计算属性。
2、创建列表
我们将使用v-for指令来循环遍历列表数据。假设我们有一个数组，存储着列表项数据。我们可以在vue实例中将该数组声明为数据模型，如下：
const app = vue.createapp({ data() { return { items: [ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, { id: 4, name: 'item 4' }, { id: 5, name: 'item 5' } ] } }});
现在，我们需要在模板中使用v-for指令遍历此数组并显示每个项目的数据。为此，我们将在vue模板中添加以下代码：
<template> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul></template>
上述代码将使用v-for指令循环遍历数据数组，并使用关键字:key为每个item元素提供唯一的标识符。
现在我们已经完成了列表的创建。
3、添加新条目
我们将使用vue提供的v-model指令来建立新的列表输入和提交表单。v-model指令允许绑定输入值到vue组件中。使用v-model指令实际上是我们一般使用文本输入框的理解方式，它会自动更新双向数据绑定。
为了添加新的列表项，我们需要显示一个表单，并从该表单收集新数据。我们用vue.js创建表单，如下所示：
<template> <div> <form @submit.prevent="additem"> <input type="text" v-model="newitem" placeholder="add a new item"> <button type="submit">add</button> </form> </div></template>
我们在表单上使用了@submit.prevent事件修饰符，这样表单永远不会真正提交。而是触发我们绑定到additem方法上的事件处理程序。此方法将添加新项目到数据数组中。
这里v-model指令是如何绑定到输入预留文本框中的呢？我们需要在vue组件的数据模型中定义一个新的变量newitem，如下所示：
const app = vue.createapp({ data() { return { items: [ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, { id: 4, name: 'item 4' }, { id: 5, name: 'item 5' } ], newitem: '' } }, methods: { additem() { this.items.push({id: this.items.length + 1, name: this.newitem}); this.newitem = ''; } }});
在additem方法中，我们在数组的末尾插入一个新的项目对象，并为新的项目对象提供一个唯一的id。添加项目后，我们将使用空字符串重置newitem。现在我们已经实现了向数组添加新条目的功能。
4、编辑条目
我们现在的目标是为每个项目添加一个编辑按钮，当点击该按钮时，可以修改项目的名称。实现这种编辑功能的方法是将v-model绑定到数据模型中的当前项并显示保存按钮。可以在每个项目旁边放一个编辑按钮，单击该按钮时切换到编辑模式。
首先，我们需要定义一个currentitem变量。该变量将指定当前正在编辑的项目。我们还需要定义editing变量，以便在编辑模式下隐藏显示条目名称，如下所示：
const app = vue.createapp({ data() { return { items: [ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, { id: 4, name: 'item 4' }, { id: 5, name: 'item 5' } ], newitem: '', editing: false, currentitem: null } }, methods: { additem() { this.items.push({id: this.items.length + 1, name: this.newitem}); this.newitem = ''; }, edititem(item) { this.editing = true; this.currentitem = item; }, saveitem() { this.editing = false; this.currentitem = null; } }});
现在我们需要在每个项目元素中显示编辑按钮。当编辑按钮被单击时，我们需要切换到编辑模式，这样就可以开始编辑当前项目了。我们可以使用以下代码为每个项目设置编辑按钮：
<template> <ul> <li v-for="item in items" :key="item.id"> <span v-if="!editing || currentitem !== item">{{ item.name }}</span> <span v-else><input type="text" v-model="currentitem.name"></span> <button @click="edititem(item)" v-if="!editing">edit</button> <button @click="saveitem()" v-if="editing">save</button> </li> </ul></template>
我们通过使用v-if指令将后备文本元素和编辑文本输入框进行切换，以显示或隐藏项目的名称。当我们使用编辑模式时，在编辑文本框中输入或编辑项目名称。可以通过单击save按钮来退出编辑模式。
5、删除条目
我们现在需要添加一个删除项目的功能。我们需要为每个项目添加一个删除按钮。当删除按钮被单击时，我们将会从数据数组中删除此项。我们会使用javascript的array.prototype.indexof()方法来查找并删除项目。
const app = vue.createapp({ data() { return { items: [ { id: 1, name: 'item 1' }, { id: 2, name: 'item 2' }, { id: 3, name: 'item 3' }, { id: 4, name: 'item 4' }, { id: 5, name: 'item 5' } ], newitem: '', editing: false, currentitem: null } }, methods: { additem() { this.items.push({id: this.items.length + 1, name: this.newitem}); this.newitem = ''; }, edititem(item) { this.editing = true; this.currentitem = item; }, saveitem() { this.editing = false; this.currentitem = null; }, deleteitem(item) { const index = this.items.indexof(item); if (index > -1) { this.items.splice(index, 1); } } }});
现在我们可以向每个项目添加一个删除按钮。当删除按钮被点击时，我们可以调用deleteitem()方法。
<template> <ul> <li v-for="item in items" :key="item.id"> <span v-if="!editing || currentitem !== item">{{ item.name }}</span> <span v-else><input type="text" v-model="currentitem.name"></span> <button @click="edititem(item)" v-if="!editing">edit</button> <button @click="saveitem()" v-if="editing">save</button> <button @click="deleteitem(item)">delete</button> </li> </ul> <div> <form @submit.prevent="additem"> <input type="text" v-model="newitem" placeholder="add a new item"> <button type="submit">add</button> </form> </div></template>
我们已经学会了如何使用vue.js进行列表页的增删改查功能。vue的简单和易于使用使其成为一种非常强大的选择，可轻松处理列表应用程序的大部分操作。
vue不仅使代码更容易理解，而且能够让我们快速创建功能强大的web应用程序。在vue.js的帮助下，为任何项目创建列表页变得更加容易。
以上就是vue列表页增删改查的详细内容。