vue小案例实现模糊查询、删除列表、添加列表
vue小案例实现模糊查询、删除列表、添加列表，本案例用于快速复习vue基本使用，vue指令。
bootstrap 用的是bootstrap4，在官网直接下载导入即可（v4.6.1）
vue 用的是 vue-2.6.12.js
demo 用到的知识点： 创建 vue 基本实例 v-for 循环渲染表格数据 状态渲染为“开关”，用的 bootstrap4 的 表单下的 Switches 组件。 全局过滤器格式化时间 添加学生功能 点击删除对应的列表 回车提交 input 输入框，（按键修饰符：keyup.enter） 输入关键字模糊查询（名字和年龄都能查询） 完整 html 代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 导入 bootstrap 的样式表 --> <!-- https://v4.bootcss.com/docs/components/forms/#switches --> <link rel="stylesheet" href="./lib/bootstrap.css" /> <style> :root { font-size: 13px; } body { padding: 8px; } </style> </head> <body> <div id="app"> <!-- 卡片区域 --> <div class="card"> <h5 class="card-header">添加和查询学生</h5> <div class="card-body"> <!-- 添加学生的表单 --> <form class="form-inline" @submit.prevent> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">学生名字</div> </div> <!-- 文本输入框 --> <input type="text" class="form-control" v-model="sname" @keyup.enter="addstu" /> </div> <!-- 提交表单的按钮 --> <button type="submit" class="btn btn-primary mb-2" @click="addstu">添加学生</button> </form> <!-- 查询学生的表单 --> <form class="form-inline" @submit.prevent> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">输入关键字</div> </div> <!-- 文本输入框 --> <input type="text" class="form-control" v-model="guanjian" @keyup.enter="getstu" /> </div> <!-- 提交表单的按钮 --> <button type="submit" class="btn btn-primary mb-2" @click="getstu">查询学生</button> </form> </div> </div> <!-- 品牌列表 --> <table class="table table-bordered table-striped mt-2"> <thead> <tr> <th>#</th> <th>学生名字</th> <th>年龄</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <!-- 表格的主体区域 --> <tbody> <!-- TODO：循环渲染表格的每一行数据 --> <tr v-for="(item,i) in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.status"> <label class="custom-control-label" :for="item.id" v-if="item.status">已开启</label> <label class="custom-control-label" :for="item.id" v-else>已禁用</label> </div> </td> <td>{{ item.Datetime | datafamat }}</td> <td> <a href="#" @click.prevent="sdelet(item.id,i)">删除</a> </td> </tr> </tbody> </table> </div> <script src="./lib/vue-2.6.12.js"></script> <script> // 用全局过滤器格式化时间 Vue.filter('datafamat',(str)=> { const dt = new Date(str) const y = dt.getFullYear() const m = padtime(dt.getMonth()) const d = padtime(dt.getDay()) const hh = padtime(dt.getHours()) const mm = padtime(dt.getMinutes()) const ss = padtime(dt.getSeconds()) return ` ${y}-${m}-${d} ${hh}:${mm}:${ss} ` }) function padtime(n){ return n > 9 ? n: "0" + n } const Vm = new Vue({ el:'#app', data:{ nextid:5, sname:'', guanjian:'', list:[ { id:1,name:'张三',age:'18',status:true,Datetime:new Date() }, { id:2,name:'张4',age:'18',status:true,Datetime:new Date() }, { id:3,name:'张5',age:'20',status:false,Datetime:new Date() }, { id:4,name:'张6',age:'19',status:true,Datetime:new Date() } ] }, methods: { addstu() { if(!this.sname) return alert('学生名字不能为空') this.list.push({ id:this.nextid, name:this.sname, status:true, Datetime:new Date() }) this.sname = '' this.nextid++ }, sdelet(e,i) { // this.list.splice(i,1) this.list.splice(i,1) }, getstu() { this.list = this.list.filter((p)=> { console.log(p) return p.name.indexOf(this.guanjian) !== -1 || p.age.indexOf(this.guanjian) !== -1 }) console.log(this.list) } } }) </script> </body> </html>
导入放入 html 文件中，导入bootstrap4,导入vue，即可直接游览器打开运行。
运行演示：输入名字添加学生，添加成功自动清空输入框的值：
输入关键可以模糊查询：
点击删除会直接删除对应的列表：
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
