快捷導(dǎo)航

Vue過(guò)濾器filters如何使用

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

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

使用場(chǎng)景

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

使用方式

1.雙花括號(hào)插值

{{message | myFilter}}

2.v-bind表達(dá)式

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

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

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

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

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

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

{{message | filterA | filterB}}

example

v-for循環(huán)渲染一個(gè)數(shù)組對(duì)象的時(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]
    }
  }
}

補(bǔ)充

{{message | filterA('arg1', 'arg2')}}

filterA被定義為接收3個(gè)參數(shù)的過(guò)濾器函數(shù)。message作為第一個(gè)參數(shù)，arg1作為第二個(gè)參數(shù)，arg2作為第三個(gè)參數(shù)。
以上我們所說(shuō)的都是定義局部過(guò)濾器，下面看看官網(wǎng)所提的定義全局過(guò)濾器。
在創(chuàng)建vue實(shí)例之前全局定義過(guò)濾器

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

new Vue({
  // ...
})

當(dāng)全局過(guò)濾器和局部過(guò)濾器重名時(shí)，會(huì)采用局部過(guò)濾器。

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

您可能感興趣的文章: