<body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label>Id: <input type="text" class="form-control" v-model="id"> </label> <label>Name: <input type="text" class="form-control" v-model="name"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label>搜索名称关键字: <input type="text" class="form-control" v-model="keywords"> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <!-- <tr v-for="item in list" :key="item.id"> --> <tr v-for="item in search(keywords)" :key="item.id"> <td>{{item.id}}</td> <td >{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="" @click.prevent="del(item.id)">删除</a> </td> </tr> </tbody> </table> </div> <script> var vm = new Vue({ el:'#app', data:{ id:'', name: '', keywords: '', list: [ { id:1, name:'奔驰', ctime: new Date() }, { id:2, name:'宝马', ctime: new Date() }, ] }, methods:{ add(){ var car = {id: this.id, name: this.name, ctime: new Date()} this.list.push(car) this.id = this.name = '' }, // splice用法： splice 粘接，胶接。 也就是去掉一部分，用其他东西替代拼接 // arr.splice(2,0,"William"); 第二个值 0，直接在index=2的地方插入新的值，没有删除旧的元素。 // George,John,Thomas,James,Adrew,Martin // George,John,William,Thomas,James,Adrew,Martin del(id){ // 数组的some(); 方法。 findIndex(); 方法类似，功能更单一，专门查找索引。 this.list.some((item, i) => { if(item.id == id){ this.list.splice(i, 1); // some(); 在数组里找符合条件的，return true 会立即终止这个数组的后续循环。 return true; }; }); }, search(keywords){ // 方法一： var newList = []; this.list.forEach(item => { // indexOf(); 检索字符串里是否包含关键字，包含则范围index值，不包含返回 -1. // console.log('曾经我也想过一了百了'.indexOf('')); // indexOf('') 返回值是 0 （搜索框空白，不是空格。） // 只要不是 -1，值都会被push到数组里。 所以搜索栏还没输关键字的时候，显示了默认的数据。 if(item.name.indexOf(keywords) != -1){ newList.push(item) }; }); return newList; // 方法二： // var newList = this.list.filter(item=>{ return this.list.filter(item=>{ // filter(); 遍历数组，返回符合条件的新数组。 // if(item.name.indexOf(keywords) != -1){} if(item.name.includes(keywords)){ return item; }; }); // return newList; 先用中间变量var = newList接收，再return 这里改写成直接return }, }, }); </script> </body>