当前位置：首页 > 前端技术 > vue >内容正文

vue

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

发布时间：2023/12/31 vue 55 豆豆

生活随笔收集整理的这篇文章主要介绍了【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实战】汽车品牌列表表格实现（添加、删除功能）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。