Vue过滤器和修饰符

最新推荐文章于 2024-04-18 08:00:00 发布

悲伤小海鸥

最新推荐文章于 2024-04-18 08:00:00 发布

阅读量81

点赞数

分类专栏： web前端文章标签： vue.js vscode

本文链接：https://blog.csdn.net/m0_65849649/article/details/123672285

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了Vue中的键盘修饰符，如监听按键事件，包括如何注册按键监听和使用按键别名。同时，文章详细讲解了Vue过滤器的概念、作用、使用场景和定义方法，强调了过滤器在文本格式化中的应用。

摘要由CSDN通过智能技术生成

1. 键盘修饰符

1.1 注册一个监听按键事件

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码

注意：每个键盘按键都会对应一个键盘码，可以参照这个网站按键码对应网址

例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}`;
    }
})