vue的過濾器通常用在一些常見的文本格式化,過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達式。
比如給價格自動加上中文的錢的字符“¥”或者是給一個時間段或(時間戳)相互之間的轉換過濾。
在javascript和jquery的年代!時間段的顯示或者是提交,都是要在顯示的時候要轉換下或者提交的時候轉換下,這樣就有點繁瑣了(個人用了vue后的感覺繁瑣了)。
不多說直接看例子如下:
filter定義的過濾器可以局部,可以全局的下面就直接說全局的
老樣子還是等先注冊一個全局的過濾器關鍵字(filter)
全局的注冊過濾器是在main.js這個文件里,當然也可以單獨的一個js文件里
Vue.filter('dateconversion', function (value) { // 一個時間戳轉正常的過濾器
let date = new Date(value) // nuw 一個時間
let getHours // 小時
let getMinutes // 分
if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判斷小時是否小于10的補全:加0
if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判斷分是否小于10的補全:加0
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回轉換后的值
})
使用起來很方便的,可以在各個組件里凡事有要轉換顯示時間的都可以用
<template>
{{date | dateconversion}} // 使用方式,就是怎么簡單,整個項目隨便用
</template>
<script>
export default {
data () {
return {
date: '' // 后臺傳來的時間戳
}
}
}
</script>
好了!簡單的介紹了過濾器使用方法和方式,下一章我會講稍微復雜點,串聯過濾器和帶參數的過濾器。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。