methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); }, del(id){ this.list.splice(id,1); // 数组里删除， 用splice remove是操作dom的 }, search(keywords){ // 做搜索要明确是从哪个里面去搜。 var newList = []; // if(this.list.name.indexOf(keywords) != -1){ // list里面有多个对象， 应该是某个对象的name符合关键字， 即 item.name.indexOf // this.list.push(); // 应该是push到新数组里面去。 newList.push(item); // }; this.list.forEach(item => { // 遍历 list 里的每个对象 // 再看一下箭头函数的课 if (item.name.indexOf(keywords) != -1){ newList.push(item); }; }); return newList; }, }
<body> <div id="app"> <!-- 本例要记的 bootstrap类 form-inline 水平排列表单。 bootstrap类 form-control findIndex(); splice(); push(); some(); padStart ?? 补 0 filter(); forEach(); VNode 是什么？？ methods 里面 del(id); 部分要再看一下。 自定义指令 v-focus --> <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" @keyup.enter="add();"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add();"> <label> 搜索名称关键字:<input type="text" class="form-control" v-focus v-model="keywords"> </label> </div> </div> <table class="table table-hover table-bordered 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"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime | dateFormat}}</td> <td><a href="javascript:;" @click="del();">删除</a></td> </tr> </tbody> </table> </div> <script> Vue.filter('dateFormat', function(dateStr, pattern=''){ var dt = new Date(dateStr); var y = dt.getFullYear(); var m = dt.getMonth() +1; var d = dt.getDate(); return `${y}-${m}-${d}`; }); Vue.directive('focus', { inserted: function (el) { el.focus(); }, }); var vm = new Vue({ el:'#app', data:{ id: '', name: '', keywords: '', list:[ {id:1, name:'宝马', ctime:new Date()}, // 这里要现在外面定义 id name ctime {id:2, name:'奔驰', ctime:new Date()} ] }, methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date() }; this.list.push(car); // 直接push到list就可以，不用管怎么加到表格里。v-for会自动渲染。 this.id = this.name = ''; }, del(id) { // 1. 如何根据Id，找到要删除这一项的索引 // 2. 如果找到索引了，直接调用 数组的 splice 方法 /* this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1) // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环 return true; } }) */ var index = this.list.findIndex(item => { if (item.id == id) { return true; } }); // console.log(index) this.list.splice(index, 1); }, search(keywords) { // search是在 列表里， 所以要联想到调用list[] 数组筛选的方法。 /* var newList = [] this.list.forEach(item => { if (item.name.indexOf(keywords) != -1) { newList.push(item) } }) return newList */ // 直接return 后面整个函数的返回值。 记住这个新用法。 // 省去了开头的var newList 和 末尾的 return newList。 直接不需要中间变量。 return this.list.filter(item => { if (item.name.includes(keywords)) { return item; }; }); // return newList } } }); </script> </body>