1、示例代碼
采用vue單文件組件,使用moment插件格式化日期
<template> <div> <h1>{{date | dateFormat}}</h1> </div></template><script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(val) { return moment(val).calendar(); } } }</script>
2、效果
3、說明
過濾器內是沒有this引用的,過濾器內的this是undefined,所以不要在過濾器內嘗試使用this引用組件實例的變量或者方法。
ps:下面看下Vue 過濾器的基本用法
// 注冊Vue.filter('my-filter', function (value) { // 返回處理后的值})// getter,返回已注冊的過濾器var myFilter = Vue.filter('my-filter')//在mustache中使用{{ msg | uppercase }}
或
//在標簽中使用<input type="password" v-model="psw | validate">
總結
以上所述是小編給大家介紹的Vue 過濾器filters及基本用法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答