在 vue.js 中實現增刪改查功能：創建：使用 v-model 綁定數據，向服務器發送 post 請求創建新記錄。讀取：向服務器發送 get 請求獲取數據。更新：使用 v-model 編輯數據，向服務器發送 put 請求更新記錄。刪除：向服務器發送 delete 請求刪除記錄。
Vue 中實現增刪改查功能
增刪改查（CRUD）是 Web 應用程序中的基本操作，它可以讓我們在數據庫中創建、讀取、更新和刪除數據。在 Vue.js 中實現 CRUD 功能相對簡單。
創建
創建新記錄時，我們將使用 v-model 雙向綁定數據并向服務器發出 POST 請求。例如：
<code class="html"><template><form>
<input v-model="newItem.name"><button type="submit">Create</button>
</form>
</template><script>
export default {
data() {
return {
newItem: { name: '' }
}
},
methods: {
createItem() {
// 向服務器發送 POST 請求
axios.post('/items', this.newItem).then(() => {
// 重新獲取數據或執行其他操作
})
}
}
}
</script></code>
登錄后復制
讀取
讀取數據時，我們將向服務器發出 GET 請求。例如：
<code class="html"><template><ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul></template><script>
export default {
data() {
return {
items: []
}
},
mounted() {
// 在組件掛載時向服務器發送 GET 請求
axios.get('/items').then((response) => {
this.items = response.data
})
}
}
</script></code>
登錄后復制
更新
更新記錄時，我們將使用 v-model 編輯數據并向服務器發出 PUT 請求。例如：
<code class="html"><template><form>
<input v-model="item.name"><button type="submit">Update</button>
</form>
</template><script>
export default {
props: ['item'],
methods: {
updateItem() {
// 向服務器發送 PUT 請求
axios.put(`/items/${this.item.id}`, this.item).then(() => {
// 重新獲取數據或執行其他操作
})
}
}
}
</script></code>
登錄后復制
刪除
刪除記錄時，我們將向服務器發出 DELETE 請求。例如：
<code class="html"><template><button>Delete</button>
</template><script>
export default {
props: ['item'],
methods: {
deleteItem() {
// 向服務器發送 DELETE 請求
axios.delete(`/items/${this.item.id}`).then(() => {
// 重新獲取數據或執行其他操作
})
}
}
}
</script></code>
登錄后復制
