filters的使用
基本用法
过滤器的目的就是通过简单的语法,来实现对原有数据的格式化输出。如果你比较较真的话,其实普通函数也能实现,只需要在需要格式化的地方调用函数也行。用法比较简单,可以用在{{}}
表达式结尾或者v-bind
结尾。
[loginview]
<template>
<div>
原始数据
<p>{{date}}</p>
使用过滤器格式化
<p>{{date | format}}</p>
<p>{{date | format3}}</p>
使用函数格式化
<p>{{format2(date)}}</p>
</div>
</template>
<script>
export default {
data() {
return {
date: new Date()
}
},
filters: {
format: function (value) {
if (!value) return ''
value = value.toLocaleDateString()
return value
},
format3: function (value) {
if (!value) return ''
value = value.toLocaleString()
return value
},
},
methods: {
format2(value) {
if (!value) return ''
value = value.toLocaleDateString()
return value
}
}
}
</script>
以上代码演示了通过不同的方式实现的数据格式化,多个过滤器的定义可以用逗号隔开。最终页面输出:

过滤器的串联用法
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
代码:
<template>
<div>
原始数据
<p>{{num}}</p>
使用过滤器实现对num的加1
<p>{{num | add1}}</p>
<p>{{num | add1 | add1 | add2}}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
filters: {
add1: function (value) {
return value+1
},
add2: function (value) {
return value+2
},
}
}
</script>
代码演示了过滤的串联,不论是相同的过滤器还是不同的过滤器都可以串联使用。
最终页面输出:

定义全局的过滤器
main.js
中定义我们的全局过滤器。如果你定义的过滤器数量很多,最好单独使用一个js文件来定义,然后引入到main.js中。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//定义全局过滤器
Vue.filter('add1', function (value) {
return value+1
})
new Vue({
render: h => h(App),
}).$mount('#app')
修改组件内的代码如下:
<template>
<div>
原始数据
<p>{{num}}</p>
使用过滤器实现对num的加1
<p>{{num | add1}}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
}
}
</script>
最终页面如期输出:

过滤器多参数传递
过滤器是 JavaScript 函数,因此可以接收参数,只是第一个参数是默认传递的。我们依然通过代码来演示下:
<template>
<div>
原始数据
<p>{{num}}</p>
使用过滤器实现对num的加1
<p>{{num | add1(true)}}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
filters:{
add1:function (value,addDouble) {
if (addDouble) {
return value + 2
}
return value + 1
}
}
}
</script>
现在我们事先的过滤器可以通过条件来切换分支逻辑了。
最终页面如期输出:

[/loginview]
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。