使用するシーン
いくつかの一般的なテキストの書式設定に使用されます。バックエンドから返されたデータ形式は最終的に表示したいものではない可能性がありますが、フィルターを通じて表示したい形式に処理できます。「パイプ」の記号で示されます。
使い方
1. 二重中括弧補間
{
{
message | myFilter}}
2. v-バインド式
<el-tag :type="message | myFilter"></el-tag>
3. vue のライフサイクル内 (メソッドなどで使用される)
this.$options.filters['这里是过滤器的名字']('过滤器的参数')
4.関数をパラメータとして受け取ることもできます
this.$options.filters['这里是过滤器的名字']('参数一', this.fun('zhangyue'))
5. フィルタは直列に接続でき、filterA の結果は filterB のパラメータに渡されます。
{
{
message | filterA | filterB}}
例
v-for ループが配列オブジェクトをレンダリングするとき
例 1
const arr = [
{
id: 1,
name: '张张'
},
{
id: 2,
name: '悦悦'
}
]
<ul>
<li v-for="item in arr" :key="item.id">{
{
item | myFilterA | myFilterB}}</li>
</ul>
export default {
filters: {
myFilterA(message) {
return '我是' + message
},
myFilterB(message) {
return message + '串联咯'
}
}
}
最終出力
我是张张串联咯
我是悦悦串联咯
例2
<el-table-column
label="status"
width="100"
>
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{
{
scope.row.status
}}</el-tag>
</template>
</el-table-column>
export default {
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger'
}
return statusMap[status]
}
}
}
補充する
{
{
message | filterA('arg1', 'arg2')}}
filterA は、3 つのパラメーターを受け取るフィルター関数として定義されます。最初のパラメータとして message、2 番目のパラメータとして arg1、3 番目のパラメータとして arg2 を指定します。
ここまではローカルフィルターの定義でしたが、公式サイトに記載されているグローバルフィルターの定義を見てみましょう。
vue インスタンスを作成する前にフィルターをグローバルに定義します。
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
グローバルフィルタとローカルフィルタの名前が同じ場合は、ローカルフィルタが使用されます。