vue列表页增删改查

王林

发布时间：2023-05-11 09:47:06

833人浏览过

来源于php中文网

原创

随着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模板中添加以下代码：

上述代码将使用v-for指令循环遍历数据数组，并使用关键字:key为每个item元素提供唯一的标识符。

jQuery实现表格数据增、删、改、查

下载

现在我们已经完成了列表的创建。

3、添加新条目

我们将使用Vue提供的v-model指令来建立新的列表输入和提交表单。v-model指令允许绑定输入值到Vue组件中。使用v-model指令实际上是我们一般使用文本输入框的理解方式，它会自动更新双向数据绑定。

为了添加新的列表项，我们需要显示一个表单，并从该表单收集新数据。我们用Vue.js创建表单，如下所示：

我们在表单上使用了@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;
    }
  }
});

现在我们需要在每个项目元素中显示编辑按钮。当编辑按钮被单击时，我们需要切换到编辑模式，这样就可以开始编辑当前项目了。我们可以使用以下代码为每个项目设置编辑按钮：

我们通过使用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()方法。