Vue 過濾器介紹與例項

2021-10-02 20:21:09 字數 1408 閱讀 8027

一、vue中的過濾器分為兩種：私有(區域性)過濾器和全域性過濾器。

二、vue過濾器：允許你自定義過濾器，可被用作一些常見的文字格式化。

三、vue過濾器可以被用在兩個地方：插值和v-bind 由管道符(』|』)指示。

四、vue過濾器宣告語法：vue.filter(『過濾器名稱』，function(msg,arg1,arg2){}) 支援多引數，第乙個引數總是msg，表示管道符(』|』)前面的資料。

五、 乙個表示式可以使用多個過濾器。過濾器之間需要用管道符「|」隔開。其執行順序從左往右。

定義無引數全域性過濾器：

>


}<


/p>


<


/div>


// 定義乙個 vue 全域性的過濾器，名字叫做  msgformat


vue.


filter


('msgformat'


,function


(msg)


)<


/script>
有引數全域性過濾器：



//定義全域性過濾器（所有的vue例項都可以共享）


//msg-要格式化的資料，arg引數


vue.


filter


('nameformat'


,function


(msg, arg, arg1)


);
元素也可以同時呼叫多個過濾器：



}<


/p>


<


/div>
私有過濾器和全域性過濾器引數化使用和呼叫方式都一樣，就是寫的位置和作用域不同···

區域性(私有)過濾器：

var vm2 =


newvue(,


methods:


,//私有過濾器


filters:-$


-$`                        }


else-$


-$$:


$:$`


//模板字串根據某種格式提供佔位與複製的字串}}


}})
私有過濾器的呼叫：

<


!-- 使用私有過濾器，只在vue本例項中使用 --


>


<


!-- vue過濾器呼叫順序：私有-


>全域性


-->


>


}<


/p>


<


/div>
注意：

Vue 過濾器案例（全域性過濾器和區域性過濾器）

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat，但是控制不同作用，乙個是全域性的...

Django 過濾器 例項

例項 safe 讓html標籤以及一些特殊符號 如 生效，下面以例子說明 value cpt 那麼輸出的時候，cpt就是加粗的，如果不加safe那麼顯示出來的就是純文字cpt striptags 取消所有html標籤,下面以例子說明 value cpt 那麼輸出的時候，只有cpt且沒有加粗沒有段落 ...

vue學習 過濾器

作用 過濾資料，一般是把伺服器返回的資料，過濾成符合頁面展示的資料 1.私有過濾器 vue.component login data function filters 2.共有過濾器 最好把vue.filter放在元件註冊之前 vue.filter toup function input,name ...