大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商品列表案例</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css"> .form-inline { padding: 50px 0 20px 0; } .form-group { margin-right: 20px; } </style> </head> <body> <div id="app"> <div class="container"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">ID：</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入您的ID" v-model="id"> </div> <div class="form-group"> <label for="exampleInputEmail2">Name：</label> <input type="text" class="form-control" placeholder="请输入您的姓名" v-model="name"> </div> <button type="button" class="btn btn-primary" @click="add">提交</button> <div class="form-group"> <input type="text" placeholder="please enter the keyword……" class="form-control" v-model="keywords" /> </div> <!-- <button type="button" class="btn btn-primary">search</button> --> </form> <table class="table table-hover table-striped"> <tr> <td>ID</td> <td>品牌名称</td> <td>添加时间</td> <td>操作</td> </tr> <tr v-for="item,index in search(keywords)" :key='item.id'> <td>{{item.id}}</td> <td>{{item.pp_name}}</td> <td>{{item.add_time | getTime()}}</td> <td> <a href="" @click.prevent='del(item.id)'>删除</a> </td> </tr> </table> </div> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', list: [{ id: 1, pp_name: '安踏', add_time: new Date() }, { id: 2, pp_name: '李宁', add_time: new Date() }, { id: 3, pp_name: '捷豹', add_time: new Date() }, { id: 4, pp_name: '悍马', add_time: new Date() } ] }, methods: { add: function() { // 数据插入数组操作 this.list.push({ id: this.id, pp_name: this.name, add_time: new Date() }); this.id = this.name = '' }, /* 根据id删除数据 分析： 先要找到这一项数据的id，然后根据id删除索引 找到索引之后直接调用数组的splice方法 */ del: function(id) { this.list.some((item, i) => { if (item.id === id) { this.list.splice(i, 1); // 在数组some中 如果返回值为true，则会立即终止后续的循环 return true; } }) }, //根据关键字进行数据的搜索 search(keywords) { var newList = [] //定义一个空的数组 this.list.forEach(item => { //判断字段的值是否和keywords相等 var aa = item.pp_name; console.log(aa) if (aa.indexOf(keywords) != -1) { newList.push(item) } }); return newList; // return this.list.filter(item => { // if(item.pp_name.includes(keywords)){ // return item // } // }) } }, // 时间的过滤 filters: { getTime: function(value) { let date = new Date(value), Y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate(), h = date.getHours(), min = date.getMinutes(), s = date.getSeconds(); if (m < 10) { m = '0' + m; } if (d < 10) { d = '0' + d; } if (h < 10) { h = '0' + h; } if (min < 10) { min = '0' + min; } if (s < 10) { s = '0' + s; } let t = Y + '-' + m + '-' + d + ' | ' + h + ':' + min + ':' + s; return t; } } }) </script> </body> </html>