Vue過濾器filters如何使用

更新時間：2023年10月19日 11:36:01 作者：悅悅豬

Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧

使用場景

用于一些常見的文本格式化。也許后端返回的數(shù)據(jù)格式并不是最終想要展示出來的，通過過濾器可以進行處理成自己想要展示出來的格式。由“管道”符號指示。

使用方式

1.雙花括號插值

{{message | myFilter}}

2.v-bind表達式

<el-tag :type="message | myFilter"></el-tag>

3.vue的生命周期中，如用在methods方法中

this.$options.filters['這里是過濾器的名字']('過濾器的參數(shù)')

4.還可以接受函數(shù)作為參數(shù)

this.$options.filters['這里是過濾器的名字']('參數(shù)一', this.fun('zhangyue'))

5.過濾器可以串聯(lián)，filterA的結果將被傳入filterB的參數(shù)中

{{message | filterA | filterB}}

example

v-for循環(huán)渲染一個數(shù)組對象的時候 example one

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 + '串聯(lián)咯'
		}
	}
}

最終輸出

我是張張串聯(lián)咯
我是悅悅串聯(lián)咯

example two

<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個參數(shù)的過濾器函數(shù)。message作為第一個參數(shù)，arg1作為第二個參數(shù)，arg2作為第三個參數(shù)。
以上我們所說的都是定義局部過濾器，下面看看官網(wǎng)所提的定義全局過濾器。
在創(chuàng)建vue實例之前全局定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

當全局過濾器和局部過濾器重名時，會采用局部過濾器。

到此這篇關于Vue過濾器filters的文章就介紹到這了,更多相關Vue過濾器filters內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: