隨著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中文網其他相關文章！
