文本框的键盘抬起keyup()可以直接触发自已写的其他事件，注意只要敲击键盘搜会执行此方法，需要监听方法
事件修饰符，按键修饰符keyup.enter()
<label for="">Name
<input type="text" name="" id="" v-model="name" class="form-control" @keyup.enter='add'>
</label>
<label for="">
<input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
</label>
案件修饰符
-
.enter
-
.tab
-
.delete
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
-
......
-
键盘的键对应键盘码的值查找资料
-
找到对应的数值
-
@keyup.数字='方法'
-
码值不好记住起别名
-
eg : html
<label for="">Name <input type="text" name="" id="" v-model="name" class="form-control" @keyup.f2='add'> </label> -
定义全局键盘码
自定义全局按键修饰符 Vue.config.keyCodes.f2=113
最终例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间过滤器</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./lib/vue.js"></script>
</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 for="">Id
<input type="text" name="" id="" v-model="id" class="form-control">
</label>
<label for="">Name
<input type="text" name="" id="" v-model="name" class="form-control" @keyup.f2='add'>
</label>
<label for="">
<input type="button" value="添加" name="" id="" class="btn btn-primary" @click="add">
</label>
<label for="">搜索名称关键字
<input type="text" name="" id="" v-model="keywords" class="form-control">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td v-text="item.name"></td>
<td>{{item.ctime|dateFormat()}}</td>
<td><a href="" @click.prevent='dele(item.id)'>删除</a></td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h2>{{1+2}}</h2>
<p>{{dt|dateFormat}}</p>
</div>
<script>
// 过滤器 start
//时间过滤器,全局，时间事件格式化
Vue.filter('dateFormat', function (dataStr,pattern='') {
// 根据给定的字符串dataStr，得到特定的时间
// yyyy-mm-dd 拼接
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
//连接
// return y+'-'+m+'-'+d
//模板字符串
// return `yyyy-mm-dd`
// 先变小写
if(pattern.toLowerCase()=='yyyy-mmm-dd'){
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
// 自定义全局按键修饰符
Vue.config.keyCodes.f2=113
// 过滤器 end
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',
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() }
// push对象
this.list.push(car)
this.id = this.name = ''
},
dele(id) {
// 根据id找到删除对象的索引 some根据指定的条件判断不知道什么时候能找到，随时可以终止
this.list.some((item, i) => {
if (item.id === id) {
// 找到索引后删除，直接调用数组的splice方法
this.list.splice(i, 1)
// 在some方法中return true ,就会立即终止这个数组的后续循环
return true
}
})
},
search(keywords) {
////1.2includes
var newList = this.list.filter(item => {
// es6中为字符串提供新的方法，string.prototype.includes('要包含的字符串')，包含返回true不包含返回false
// contains选取包含指定字符串的数据
if (item.name.includes(keywords)) {
return item
}
})
return newList
}
}
})
var vm1 =new Vue({
el:'#app2',
data:{
dt:new Date()
},
filters:{
// 过滤器调用采用就近原则，如果私有过滤器和全局过滤器名称一样了，优先调用
dateFormat: function (dataStr,pattern='') {
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if(pattern.toLowerCase()=='yyyy-mmm-dd'){
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~`
}
}
}
})
</script>
</body>
</html>
