vue列表页增删改查

随着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列表页增删改查的详细内容。更多信息请关注PHP中文网其他相关文章！