VUE2 X過濾器的使用方法

2021-09-14 03:34:16 字數 841 閱讀 3752

vue2.x過濾器的使用方法有幾種,今天講一種,以cnode社群api為示例,轉換tab型別為中文漢字。

首先我們在assets資料夾中新建個js的資料夾,並新建common.js,然後將過濾器寫在這個檔案中。當然你也可以寫在單個元件中,這個等下後面說。

/**

* 將tab型別轉換成漢字

* @param tab 待轉換前的tab值

* @return 轉換後的tab中文

*/export function change (tab)

}

上面是common.js檔案中過濾器。檔案如下:

下面在vue檔案中引入並使用過濾器:

上面的filters很重要,如果沒有,過濾器將無法使用。

最後就是在div中的使用了。非常簡單。如下:

上面的change就是過濾器。item.tab將tab的值傳給change過濾器自動轉換。你可以在common.js中寫更多的過濾器或其他方法。使用方法都是一樣的。

你也可以直接將過濾器寫在vue檔案中。就寫在filters裡面:

VUE2 x之過濾器的基本用法

vue.js 允許你自定義過濾器,可被用於一些常見的文字格式化。過濾器可以用在兩個地方 雙花括號插值和v bind表示式。過濾器應該被新增在 j ascript 表示式的尾部,由 符號指示 過濾器存在全域性定義和區域性定義兩種方式 1 區域性定義是在vue例項的filter屬性中定義函式,它也只能在...

vue 過濾器的使用方法 filter

filter.js內封裝的工具類 獲得時間差,時間格式為 年 月 日 小時 分鐘 秒 或者 年 月 日 小時 分鐘 秒 其中,年月日為全格式,例如 2010 10 12 01 00 00 返回精度為 秒,分,小時,天 const getdatediff starttime,endtime,difft...

Vue過濾器的使用

官方文件 1.作用 在我們頁面顯示值之前加一層過濾,展示我們過濾後的值 2.使用位置 雙花括號插值和v bind表示式,由管道符號 表示 3.使用語法 可以同時使用多個過濾器,後面過濾器的data就是前面表示式傳過來的值 3.v bind 屬性 變數名 過濾器名 4.定義語法 1.全域性定義 vue...