- 完成功能:显示品牌列表、添加品牌、删除品牌、搜索品牌
- 引用bootstrap实现样式
- 涉及知识点:v-for、v-model、过滤器、字符串的padStart方法、按键修饰符、文本框捕获焦点
添加品牌
首先,将Vue实例中的data的list的值循环显示(v-for)在页面上,绑定key来唯一标识;
点击添加按钮时,绑定添加事件,将id和name的值创建一个对象加入到list中,之后将id和name清空;
<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" v-model="id" class="form-control">
</label>
<label>
Name:<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
Select:<input type="text" v-model="keyword" class="form-control">
</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}}</td>
<td><a href="">删除</a> </td>
</tr>
</tbody>
</table>
<script>
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
keyword:'',
list:[
{id:1,name:"奔驰",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()},
{id:3,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='';
}
}
})
</script>
删除品牌
当点击删除时,我们要在页面中删除此条数据,并且要在list中同时删除。
主要是需要找到 点击列表的索引,借助some()或者findIndex()找到索引,splice()删除,同时需要注意使用.prevent取消超链接a的默认行为
<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" v-model="id" class="form-control">
</label>
<label>
Name:<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
Select:<input type="text" v-model="keyword" class="form-control">
</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}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
<script>
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
keyword:'',
list:[
{id:1,name:"奔驰",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()},
{id:3,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='';
},
del(id){
/*this.list.some((item,i)=>{
if (item.id==id){
this.list.splice(i,1);
return true;
}
});*/
var index=this.list.findIndex(item=>{
if (item.id==id){
return true;
}
});
this.list.splice(index,1);
}
}
})
</script>
搜索品牌
在搜索品牌的时候,我们不再使用item in list
,而是借助一个方法,将搜索输入的关键词作为参数,来显示品牌列表。当搜索框为空时,显示所有的数据,不为空时,显示匹配的数据信息(item in select(keyword)
)
// ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含
//的字符串') 如果包含,则返回 true ,否则返回 false
select(word){
/*var newList=[];
this.list.forEach(item=>{
if(item.name.indexOf(word)!=-1){
newList.push(item);
}
});
return newList;*/
return this.list.filter(item=>{
if (item.name.includes(word)){
return item;
}
});
}
添加一些细节
以上代码基本完成品牌的管理,之后我们需要添加一些细节问题
- 创建时间显示为"2019-07-27T09:03:41.218Z",我们想要将他改成yyyy-mm-dd或者yyyy-mm-dd hh:mm:ss格式,同时需要注意位数问题
- 想要点击回车的时候就可以添加数据
- 页面进入时可以自动获取焦点
-
时间修改:
涉及到过滤器,字符串的padStart方法Vue允许自定义过滤器,可被用作常见的文本格式化
用途:插值表达式,v-bind
格式:{{ name | nameope }}
语法:Vue.filter(‘过滤器名称’,"function(){});
私有过滤器:filters:{}
过滤器有就近原则,当私有过滤器和全局过滤器名称一致时,优先私有过滤器
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString) 或 String.prototype.padEnd(maxLength, fillString)来填充字符串;
<td>{{item.ctime|timeFormat()}}</td>
<!--<td>{{item.ctime|timeFormat('yyyy-mm-dd')}}</td>-->
Vue.filter('timeFormat',function (dateStr,pattern="") {
var dt=new Date(dateStr);
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=(dt.getDate()).toString().padStart(2,'0');
if (pattern.toLowerCase()=='yyyy-mm-dd'){
return `${y}-${m}-${d}`;
} else{
var hh=(dt.getHours()).toString().padStart(2,'0');
var mm=(dt.getMinutes()).toString().padStart(2,'0');
var ss=(dt.getSeconds()).toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
- 按键修饰符
2.x版本的自定义键盘修饰符
除了enter、tab、delete、esc、down等按键Vue中可以直接使用,其他的按键需要自定义才可使用
通过Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名(通过keyCode获得按键值):
Vue.config.keyCodes.f2 = 113;
<input type="text" v-model="name" @keyup.f2="add">
- 自定义文本框获取焦点
Vue.directive()
参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,但是: 在调用的时候,必须 在指令名称前 加上 v- 前缀来进行调用
参数2: 是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
主要时间段:bind,inserted,update
Vue.directive('focus', {
bind: function (el) { // 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
// 注意: 在每个 函数中,第一个参数,永远是 el ,表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的JS对象
// 在元素 刚绑定了指令的时候,还没有 插入到 DOM中去,这时候,调用 focus 方法没有作用
// 因为,一个元素,只有插入DOM之后,才能获取焦点
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作,最好在 inserted 中去执行,放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候,会执行 updated, 可能会触发多次
}
})
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
<link href="lib/bootstrap-3.3.7.css" rel="stylesheet">
</head>
<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" v-model="id" class="form-control">
</label>
<label>
Name:<input type="text" v-model="name" class="form-control" @keyup.enter="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
Select:<input type="text" v-model="keyword" class="form-control" v-focus>
</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 select(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime|timeFormat()}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
Vue.directive('focus',{
inserted:function (el) {
el.focus();
}
});
Vue.filter('timeFormat',function (dateStr,pattern="") {
var dt=new Date(dateStr);
var y=dt.getFullYear();
var m=(dt.getMonth()+1).toString().padStart(2,'0');
var d=(dt.getDate()).toString().padStart(2,'0');
if (pattern.toLowerCase()=='yyyy-mm-dd'){
return `${y}-${m}-${d}`;
} else{
var hh=(dt.getHours()).toString().padStart(2,'0');
var mm=(dt.getMinutes()).toString().padStart(2,'0');
var ss=(dt.getSeconds()).toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
keyword:'',
list:[
{id:1,name:"奔驰",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()},
{id:3,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='';
},
del(id){
/*this.list.some((item,i)=>{
if (item.id==id){
this.list.splice(i,1);
return true;
}
});*/
var index=this.list.findIndex(item=>{
if (item.id==id){
return true;
}
});
this.list.splice(index,1);
},
select(word){
/*var newList=[];
this.list.forEach(item=>{
if(item.name.indexOf(word)!=-1){
newList.push(item);
}
});
return newList;*/
return this.list.filter(item=>{
if (item.name.includes(word)){
return item;
}
});
}
}
})
</script>
</html>
效果图: