大江東去，浪淘盡，千古風流人物。故壘西邊，人道是，三國周郎赤壁。亂石穿空，驚濤拍岸，卷起千堆雪。江山如畫，一時多少豪傑。遙想公瑾當年，小喬初嫁了，雄姿英發。羽扇綸巾，談笑間，檣櫓灰飛煙滅。故國神游，多情應笑我，早生華發。人生如夢，一尊還酹江月。--來自奔跑的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>