vue初识之过滤器与修饰符

一、过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化

1.用到的地方

• 插值表达式
• v-bind表达式

由管道符连接 |

2.使用语法

• {{变量 | 过滤器名}}
• {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

3.定义语法

（1）全局定义

Vue.filter(过滤器的名字,回调函数(data,format))

其中data指的是管道符前面的数据，format指的是过滤器传过来的参数

（2）私有定义

filter：{
  	过滤器的名字（data,format）{
  		return
  	}
  }

4.实例

Vue.filter('setMsg', function (data, format) {
            console.log(data);
            console.log(format);
            return data.replace('好人', '***').replace('真谢谢你', '*******')
        })

filters: {

                madd(data, format) {
                    return data.replace('甜蜜蜜', '真好喝')
                }

            }

二、修饰符

键盘修饰符

1.注册监听按键事件

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

注意：每个键盘按键都会对应一个键盘码

2.按键别名

部分按键还会提供按键别名如

• .enter （回车键）
• .tab （Tab键）
• .delete (捕获“删除”和“退格”键)
• .esc （退出键）
• .space （空格键）
• .up （上）
• .down （下）
• .left （左）
• .right （右）

3.自定义键名

Vue.config.keyCodes.键名=键码

实例

 // 自定义按键别名
        Vue.config.keyCodes.m = 77



        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
                keyup(event) {
                    console.log(event);
                    console.log('点击了');
                }
            }
        })

<div id='app'>
        <input type="text" @keyup="keyup">
        <input type="text" @keyup.65="keyup">
        <input type="text" @keyup.66="keyup">
        <input type="text" @keyup.8="keyup">
        <br>
        <br>
        <br>
        <input type="text" @keyup.space="keyup">
        <input type="text" @keyup.enter="keyup">
        <input type="text" @keyup.tab="keyup">
        <input type="text" @keyup.delete="keyup">
        <input type="text" @keyup.esc="keyup">
        <input type="text" @keyup.up="keyup">
        <input type="text" @keyup.down="keyup">
        <input type="text" @keyup.left="keyup">
        <input type="text" @keyup.right="keyup">
        <br>
        <br>
        <br>

        <input type="text" @keyup.m="keyup">
    </div>