快捷導(dǎo)航

在Vue中定義和調(diào)用過濾器的方法

更新時(shí)間：2023年09月15日 11:48:59 作者：傳智教育

過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下

過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化。過濾器可以用在兩個(gè)地方：插值表達(dá)式和 v-bind 屬性綁定。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，示例代碼如下：

<l--在雙花括號中通過“管道符“調(diào)用capitalize過濾器，對message的值進(jìn)行格式化-->
<p>{{ message | capitalize }}</p>
<！--在v-bind 中通過“管道符”調(diào)用 formatId過濾器，對rawId的值進(jìn)行格式化-->
<div v-bind:id="rawId| formatId"></div>

在創(chuàng)建 vue 實(shí)例期間，可以在 filters 節(jié)點(diǎn)中定義過濾器，示例代碼如下：

const vm = new Vue({
    el: '#app'，
    data: {
        message: 'hello vue. js',
        info: 'title info'
    },
    filters: { // 在 filters 節(jié)點(diǎn)下定義“過濾器”
        capitalize(str) { //把首字母轉(zhuǎn)為大寫的過濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

在 filters 節(jié)點(diǎn)下定義的過濾器，稱為“私有過濾器”，因?yàn)樗荒茉诋?dāng)前 vm 實(shí)例所控制的 el 區(qū)域內(nèi)使用。

如果希望在多個(gè) vue 實(shí)例之間共享過濾器，則可以按照如下的格式定義全局過濾器：

// 全局過濾器-獨(dú)立于每個(gè)vm實(shí)例之外
// Vue.filter(）方法接收兩個(gè)參數(shù)：
//     第 1 個(gè)參數(shù)，是全局過濾器的“名字“
//     第 2 個(gè)參數(shù)，是全局過濾器的“處理函數(shù)“
Vue.filter('capitalize', (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1)
})

過濾器可以串聯(lián)地進(jìn)行調(diào)用，例如：

<!--把 message的值，交給filterA 進(jìn)行處理-->
<!--把filterA處理的結(jié)果，再交給filterB進(jìn)行處理-->
<!--最終把filterB處理的結(jié)果，作為最終的值渲染到頁面上-->
{{ message | filterA | filterB }}

連續(xù)調(diào)用多個(gè)過濾器的示例代碼如下：

<！--串聯(lián)調(diào)用多個(gè)過濾器-->
<p>{{text | capitalize | maxLength)}</p>
//全局過濾器-首字母大寫
Vue.filter('capitalize', (str) => {
  return str.charAt(0).tolpperCase() + str.slice(1) + '--'
}）
//全局過濾器 - 控制文本的最大長度
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 11) +'…'
}）

過濾器的本質(zhì)是 JavaScript 函數(shù)，因此可以接收參數(shù)，格式如下：

<！-- arg1和 arg2 是傳遞給 filterA 的參數(shù)-->
<p>{{ message | filterA(arg1, arg2) }}</p>
//過濾器處理函數(shù)的形參列表中：
//  第一個(gè)參數(shù)：永遠(yuǎn)都是”管道符“前面待處理的值
//  從第二個(gè)參數(shù)開始，才是調(diào)用過濾器時(shí)傳遞過來的arg1和arg2參數(shù)
Vue.filter('filterA',(msg, arg1, arg2) =>{
  //過濾器的代碼邏輯...
}）

過濾器傳參，示例代碼如下：

<!--調(diào)用 maxlength 過濾器時(shí)傳參-->
<p>{{text | capitalize | maxLength(5)}}</p>
//全局過濾器 - 首字母大寫
Vue.filter('capitalize',(str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
//全局過濾器-控制文本的最大長度
Vue.filter('maxLength', (str, len = 10) => {
  if (str.length A len) return str
  return str.slice(0, len) +'…
}）

過濾器的兼容性

過濾器僅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了過濾器相關(guān)的功能。

在企業(yè)級項(xiàng)目開發(fā)中：

? 如果使用的是 2.x 版本的 vue，則依然可以使用過濾器相關(guān)的功能

? 如果項(xiàng)目已經(jīng)升級到了 3.x 版本的 vue，官方建議使用計(jì)算屬性或方法代替被剔除的過濾器功能

具體的遷移指南，請參考 vue 3.x 的官方文檔給出的說明：

https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

到此這篇關(guān)于如何在Vue中定義和調(diào)用過濾器的文章就介紹到這了,更多相關(guān)vue調(diào)用過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: