vue全局过滤器(filter)和局部过滤器(filters)
vue全局过滤器(filter)和局部过滤器(filters)
·
官方文档: https://cn.vuejs.org/v2/guide/filters.html
过滤器作用:
在不改变原始数据的情况下 格式化展示数据
对数据在模板中的表现过滤,符合预期,比如:数据是0和1,想要表现成对错、成功失败、数据需要过滤器来格式化,vue1.x版本有系统自带过滤器,vue2.x之后完全需要自定义,没有自带过滤器,vue3也已经被砍掉了哟!
过滤器可以用在两个地方:
①插值表达式
<p> {{message | formatId}} </p>
②v-bind属性绑定
<div :id="message | formatId"> </div>
首先过滤器本质上是函数,所以过滤器中一定有返回值
通过,过滤器的第一个形参就可以获取到管道符前面代处理的那个值
1、局部定义(filters):
语法:
new Vue({
data:{},
// 在data平级写filters
filters:{
过滤器名字:函数(要过滤的原数据,参数){
过滤器的功能
return 过滤的结果
}
}
})
案例:把第一个字母过滤为大写
<div id="app">
<p>message的值为:{{message | tian }}</p>
</div>
<script>
const vm = new Vue({
el:"#app",
data:{
message: "helloTian"
},
//过滤器本质上是函数
filters:{
//注意: 过滤器函数形参中的val,永远是"管道符"前面的那个值
tian(val){
//charAt方法接受索引值,表示从字符串中把下标对应的字符,获取出来
let first = val.charAt(0).toUpperCase()
//slice方法,可以截取字符串,从指定下标往后截取
let other = val.slice(1)
return first+ other
}
}
})
// 最后的结果就展示HelloTian
</script>
2、全局定义(filter)
//Vue.filter()方法接收2个参数
//第一个参数是全局过滤器的"名字"
//第二个参数是全局过滤器的"处理函数"
Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
过滤器的功能
return 过滤的结果
})
//同样上面的过滤第一个字母大写
<p>message的值为 {{message | capi }}</p>
//str接收的就是管道符前面准备处理的值
Vue.filter('capi',(str)=>{
return str.chartAt(0).toUpperCase() + str.slice(1) + "~~~~"
})
3、使用:
| 管道符
案例: 可以全局过滤一个日期 {{item.data | dateFormat}}
在main.js 里
Vue.filter('dateFormat', (originVal)=> {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 也可以用第三方库 dayjs 可以直接去看文档
首先就是下载完了引入再定义全局过滤器
Vue.filter('dateFormat', (originVal)=> {
//直接调用dayjs()得到的是当前时间哟
//dayjs(给定的日期时间) 得到指定的日期时间
const dtStr = dayjs(originVal).format('YYYY-MM-DD HH:mm:ss')
return dtStr
})
也可以定义局部的
<template>
<text>发表时间:{{item.add_time | formatDate}}</text>
</template>
<script>
export default {
filters: {
formatDate (date) {
const nDate = new Date(date)
const year = nDate.getFullYear()
const month = nDate.getMonth().toString().padStart(2,0)
const day = nDate.getDay().toString().padStart(2,0)
return year+'-'+month+'-'+day
}
}
}
</script>
注意:
过滤器本质是JavaScript函数,因此可以接受参数,格式如下:
<p> {{ message | tian( arg1,arg2 ) }} </p>
过滤器处理函数的形参列表中:
第一个参数 永远是"管道符"前面待处理的值msg
从第二个参数开始:才是调用过滤器时传递过来的 arg1 和 arg2 参数
Vue.filter('tian' , (msg , arg1, arg2 ) => {
//过滤器的代码逻辑
})
如果全局过滤器和私有过滤器重命了,则会就近原则调用过滤器
当然也可以调多个过滤器 xxx | xxx | xxx |
更多推荐
已为社区贡献23条内容
所有评论(0)