按键修饰符
- .enter
- .tab
- .delete(捕获删除或者异常)
- .esc
- .space
- .up
- .down
- .left
- .right
通过全局Vue.config.keyCodes.f2=113 ---->查询按键编码
调用@keyup.f2="add"
<!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>
