1. 键盘修饰符
1.1 注册一个监听按键事件
-
监听所有按键:v-on:keyup
-
监听指定按键:v-on:keyup.按键码
注意:每个键盘按键都会对应一个键盘码,可以参照这个网站按键码对应网址
1
例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<div @keyup="up">qweqwqe</div>
<input @keyup="up" @keydown="down" type="text">
AAAAAA
<input @keyup.65="up" type="text">
<input @keyup.a="up" type="text">
enter
<input @keyup.13="up" type="text">
<input @keyup.enter="up" type="text">
tab
<input @keyup.prevent.tab="up" type="text">
f5
<input @keyup.116="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
<input @keyup.tab="up" type="text">
</div>
<script>
// 自定义按键别名
Vue.config.keyCodes.a = 65
const vm = new Vue({
el: '#app',
data: {
},
methods: {
up(){
console.log('up');
},
down(){
console.log('down');
}
},
})
</script>
</body>
</html>
.2 使用按键别名
vue提供的按键别名
-
.enter
-
.tab
-
.delete (捕获“删除”和“退格”键)
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
举例:如何使用v-on:keyup.按键别名?
答:监听enter按键;v-on:keyup.enter
二.过滤器
概念
Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
作用
在我们页面显示值之前加一层过滤,展示我们过滤后的值
注意事项
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
使用语法
-
{{变量 | 过滤器名}}
-
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器,后面过滤器的data就是前面表达式传过来的值
定义语法
-
全局定义:
通过Vue提供的filter方法定义:Vue.filter()
参数:过滤器的名字和过滤器执行函数
例二:
Vue.filter('dateFormat', function (data, format) {
// 日期格式化
console.log(format);
// 转成date对象
let time = new Date(data);
// 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
let y = time.getFullYear();
// 这里需要注意的地方,月份是从0开始排序的
let m = (time.getMonth() + 1).toString().padStart(2, '0');
// getDay应该是获取了星期几
// getDate获取日期
let d = time.getDate().toString().padStart(2, '0');
// console.log(y);
// console.log(m);
// console.log(d);
if (format == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
let h = time.getHours().toString().padStart(2, '0');;
let min = time.getMinutes().toString().padStart(2, '0');;
let secondes = time.getSeconds().toString().padStart(2, '0');;
return `${y}-${m}-${d} ${h}:${min}:${secondes}`;
}
})