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>
