methods vue过滤器 和_vue过滤器和修饰符

vue过滤器和修饰符

1、过滤器

Vue.js允许你自定义过滤器，过滤器可以用在两个地方

(1)mustache插值 和 v-bind表达式  添加在JavaScript表达式的尾部 由“管道”符指示。

作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值。

注意事项

过滤器可以用在两个地方：双花括号插值和v-bind表达式

使用语法

{{变量|过滤器名}}

{{变量|过滤器|另一个过滤器}}可以同时使用多个过滤器，后面过滤器的

data就是前面表达式传过来的值

全局定义： 通过Vue提供的filter 方法定义：Vue.filter()

参数：过滤器的名字或过滤器执行函数

Vue.filter('dateFormat',function(data,format){

//日期格式化

console.log(format);

//转成date对象

let time=newDate(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}`;

}

})

私有定义

filters 是实例化Vue的一个参数，和data,methods平级的

newVue({

el:'#app',

filters:{

dateFormat(data,format){

...

}

}

});

注意事项

1.函数的第一个参数都是data，也就是我们要过滤的值。

2.过滤器可以自定义一些参数。

3.过滤器函数的返回值就是最终显示的值

键盘修饰符

1.监听所有按键：v-on:keyup

2.监听指定按键：v-on:keyup.按键码   每个键盘按键都会对应一个键盘码

vue提供的按键别名

.enter

.tab

.delete(捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

使用 监听enter按键；v-on:keyup.ente

自定义按键别名

Vue.config.keyCodes.f1=112

自定义指令

全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1.指令的名字(定义的时候不加v-,使用vue指令的时候加上v-)

2.对象，里面包含三个钩子方法

bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性

的初始化设置

inserted这个元素已经渲染到界面上之后执行

update当元素有更新的时候执行

3.这三个方法的参数有哪些

el：指令所绑定的元素，可以用来直接操作DOM。

binding：一个对象，包含以下属性：

name：指令名，不包括v-前缀。

value：指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2。

oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。

无论值是否改变都可用

//html内容

你好