1、过滤器的用法
<div>{{msg1 | firstSet}}</div>
2、说明
- 过滤器一般用在插值表达式中,msg1为插入的值,| 为管道符,firstSet 为过滤器名称
- 过滤器不改变真正的
data
,而只是改变渲染的结果,并返回过滤后的版本。 - 过滤器可传多个参数,第一个参数为管道符前的msg1,可省略
- 带有多个参数、多个私有过滤器的用法如下:
<template>
<div class="root">
<div>第一种</div>
<div>{{msg1 | firstSet}}</div>
<div>第二种</div>
<div>{{msg2 | secondSet('1111')}}</div>
<div>第三种</div>
<div>{{msg3 | thirdSet('1111','2222')}}</div>
<div>第四种:挂多个filter</div>
{{new Date()|forthSet|fivethSet}}
</div>
</template>
<script>
export default {
data(){
return{
msg1: '不带参数的filter',
msg2: '带1个参数的filter',
msg3: '带2个参数的filter',
}
},
methods:{
},
filters:{
firstSet(msg){
return msg+"**********"
},
secondSet(msg,arr1){
return msg+"**********这个参数是:"+arr1
},
thirdSet(msg,arr1,arr2){
return msg+"**********第1个参数是:"+arr1+',第2个参数是'+arr2
},
forthSet(dateStr, pattern = ''){
// 根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
},
fivethSet(msg){
return msg+"**********555"
}
}
}
</script>
<style lang="stylus" scoped>
.root{
margin:20px 100px;
}
</style>
效果图如下:
3、全局过滤器
一般在main.js中进行定义全局过滤器,使用方式和私有过滤器一样,切不需要其他前置步骤,直接使用
Vue.filter('forthSet',function(dateStr, pattern = ''){
// 根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
4、其他方法中调用
this.$options.filters['过滤器名称']('第一个值','第二个值')
5、在view中也可以使用
<view v-if="$options.filters['setName'](name,1)">{{name|setName(1)}}</view>