九、过滤器
过滤器就是对要显示到页面上的数据进行处理,对用户来说更加友好
语法:在vue实例中有一个属性filters,和data同级,filters里面存放的都是处理函数
页面使用:通过{{xxx(数据) | 过滤函数}}或者用v-bind绑定标签的属性
<div id="app">
<p>{{日期|date}}</p>
</div>
filters:{
date(arg){
//arg就是未处理的日期
//下面是对arg进行处理的代码
//这个函数的返回值会作为页面的显示数据
}
}
也可以多个过滤器处理同一条数据
<div id="app">
<!--date1处理的数据会传入date2里,date2处理好的数据会传入date3中,date3的数据成为页面显示的数据-->
<!--过滤器也可以传参,在括号写入值就会传入对应的函数传参之后,过滤器的参数就变成2个-->
<p>{{日期|date1|date2(arg1)|date3(arg2)}}</p>
</div>
filters:{
date1(arg){
//arg就是未处理的日期
//下面是对arg进行处理的代码
//这个函数的返回值会作为date2的参数
},
date2(arg){
//这个函数的返回值会作为date3的参数
},
date3(arg){
//这个函数的返回值会作显示在页面上
}
}
十、自定义指令
1.语法定义
局部指令:
//第一种创建方式
new Vue({
directives:{
指令名:{
//配置
}
}
})
//第二种方式
new Vue({
directives:{
指令名(){
//代码
//这里的this是window
console.log(this)
}
}
})
全局指令:
Vue.directive('指令名',{
//配置
})
2.配置对象中常用的三个回调函数
new Vue({
directives:{
指令名:{
//当指令与元素绑定成功后触发
bind(ele,bind){
//代码
},
//指令所在元素被插入页面时
inserted(ele,bind){
//代码
},
//指令所在模板被重新解析时
update(ele,bind){
//代码
}
}
}
})
定义指令
1.语法定义
局部指令:
//第一种创建方式
new Vue({
directives:{
指令名:{
//配置
}
}
})
//第二种方式
new Vue({
directives:{
指令名(){
//代码
//这里的this是window
console.log(this)
}
}
})
全局指令:
Vue.directive('指令名',{
//配置
})
2.配置对象中常用的三个回调函数
new Vue({
directives:{
指令名:{
//当指令与元素绑定成功后触发
bind(ele,bind){
//代码
},
//指令所在元素被插入页面时
inserted(ele,bind){
//代码
},
//指令所在模板被重新解析时
update(ele,bind){
//代码
}
}
}
})