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不僅讓程式碼更容易理解，而且能夠讓我們快速創建功能強大的網路應用程式。在Vue.js的幫助下，為任何專案建立清單頁面變得更加容易。

以上是vue列表頁增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章！