當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue实战】汽车品牌列表表格实现（添加、删除功能）

發布時間：2023/12/31 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue实战】汽车品牌列表表格实现（添加、删除功能）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. Vue的基本使用步驟

導入vue.js文件

new Vue()構造函數，得到vm實例對象

聲明el和data數據節點

MVVM的對應關系

2. 實現

2.1 效果

樣式使用Bootstrap渲染

2.2 目錄結構

2.3 代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="/lib/bootstrap.css" /><link rel="stylesheet" href="/css/brandlist.css" /></head><body><div id="app"><div class="card"><div class="card-header">添加品牌</div><div class="card-body"><form @submit.prevent="add"><div class="form-row align-items-center"><div class="col-auto"><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">品牌名稱</div></div><inputtype="text"class="form-control"placeholder="請輸入品牌名稱"v-model.trim="brand"/></div></div><div class="col-auto"><button type="submit" class="btn btn-primary mb-2">添加</button></div></div></form></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th scope="col">#</th><th scope="col">品牌名稱</th><th scope="col">狀態</th><th scope="col">創建時間</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{ item.id }}</td><td>{{ item.name }}</td><td><div class="custom-control custom-switch"><inputtype="checkbox"class="custom-control-input":id="'cb' + item.id"v-model="item.status"/><labelclass="custom-control-label":for="'cb' + item.id"v-if="item.status">已啟用</label><label class="custom-control-label" :for="'cb' + item.id" v-else>已禁用</label></div></td><td>{{ item.time }}</td><td><a href="javascript:;" @click="remove(item.id)">刪除</a></td></tr></tbody></table></div><script src="./lib/vue.js"></script><script>const vm = new Vue({el: "#app",data: {// 用于接收用戶輸入的品牌名稱brand: "",// 下一個可用的品牌idnextId: 4,// 品牌的列表數據list: [{ id: 1, name: "寶馬", status: true, time: new Date() },{ id: 2, name: "奧迪", status: false, time: new Date() },{ id: 3, name: "保時捷", status: true, time: new Date() },],},methods: {// 點擊鏈接，刪除對應的品牌remove(id) {// console.log(id);// 使用過濾方式this.list = this.list.filter((item) => item.id !== id);},// 阻止表單默認提交行為之后，觸發add方法add() {// console.log(this.brand);// 如果brand的值為空字符串，return出去if (this.brand === "") {alert("必須要填寫品牌名稱！");return;}// 執行添加的邏輯// 1. 要添加的品牌對象const obj = {id: this.nextId,name: this.brand,status: true,time: new Date(),};// 2. 往this.list中push對象this.list.push(obj);// 3. 清空this.brand，讓nextId自增1this.brand = "";this.nextId++;},},});</script></body> </html>

參考：b站黑馬程序員vue視頻。

總結

以上是生活随笔為你收集整理的【Vue实战】汽车品牌列表表格实现（添加、删除功能）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。