vue過濾器的使用

2021-10-01 08:28:40 字數 989 閱讀 2674

很多時候我們從後台拿到的資料格式並不是我們想要的,比如時間,一般後台給的是時間戳,前端需要轉化為類似yyyy-mm-nn的形式,如果不是直接渲染資料,還是能夠使用moment包去轉化,如果是像在**中這種寫法還比較簡單,能夠對資料直接操作

,

},

而像需要直接渲染的可能就需要我們遍歷列表去乙個乙個修改,比較麻煩,這時候就可以使用過濾器。

過濾器有兩種,一種是全域性過濾器,可以在任何乙個元件內都可以使用。另一種則是元件內部的過濾器,註冊元件內部過濾器則只能在當前元件內使用。

全域性過濾器

import vue from 'vue';

vue.filter('formattime', function (val) `;

const day = date.getdate() > 9 ? date.getdate() + 1 : `0$`;

const hour = date.gethours();

const minutes = date.getminutes();

const seconds = date.getseconds();

return `$-$-$ $ : $ : $`;

});

區域性過濾器

export default `;

const day = date.getdate() > 9 ? date.getdate() + 1 : `0$`;

const hour = date.gethours();

const minutes = date.getminutes();

const seconds = date.getseconds();

return `$-$-$ $ : $ : $`;}},

data ()

}}

過濾器的使用

}

Vue過濾器的使用

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

Vue 過濾器的使用

vue官方文件是這樣說的 vue過濾器用於格式化一些常見的文字。在實際專案中的使用 定義過濾器 在src定義乙個filter.js檔案,裡面定義過濾器函式,在最後要使用 exprot default 將定義的函式暴露出來 將時間戳轉化為日期格式 function formatdate value,f...

vue 過濾器是使用

1.過濾器可以用在兩個地方使用 雙花括號插值和v bind表示式 2.你可以在乙個元件的選項中定義本地的過濾器 filters 3.在建立 vue 例項之前全域性定義過濾器 vue.filter capitalize function value new vue 注意 1.在上述例子中,capita...