Vue中的過濾器(filter)是一種便捷的方式來格式化文本、日期、貨幣等數據。在渲染過程中使用一些插值表達式{{..}},可以利用過濾器來操作這些數據。Vue默認內置了一些常用的過濾器,當然我們也可以自定義過濾器。
每個過濾器都是一個函數,接收一個值作為參數,并返回處理后的值。當調用過濾器時,我們可以在該值后面加上一個豎線(|),后面跟隨過濾器的名稱和可選參數。例如,dateFormat是一個自定義的過濾器,它可以將時間戳轉為指定的日期格式。
Vue.filter('dateFormat', function (timestamp, format) { var date = new Date(parseInt(timestamp)); format = format || 'yyyy-MM-dd hh:mm:ss'; var o = { "M+": date.getMonth() + 1, "d+": date.getDate(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds(), "q+": Math.floor((date.getMonth() + 3) / 3), "S": date.getMilliseconds() }; if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(format)) { format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return format; })
在模板中使用過濾器時,只需要通過這樣的方式調用。
{{ timestamp | dateFormat('yyyy-MM-dd') }}
可以看到在數據表達式中使用了pipe符號“|”將過濾器應用于表達式的結果。若有多個過濾器對數據進行處理,只需連續寫多個pipe符號即可。
{{ message | filterA | filterB }}
以上就是Vue過濾器的簡單介紹,雖然對于大部分內容已經具有了基本的了解,但是有些內容需要結合具體場景實際應用來深入理解。