A, vue filter concepts
+ Concept: Vue.js allows you to customize filters, ** it may be used as some common text formatting **.
+ Filters can be used in two places: ** mustache interpolation and v-bind expression **.
+ Filter should be added at the end of the JavaScript expression, a "pipe" which is indicated;
+ done before output, the last layer of the packaging process.
+ For example: list | Filters
Second, the private filter
Private filters
defined method: private local filter may only be used in the region of the current VM object View control
filters: {
// 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错
dataFormat(input, pattern = "") {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
HTML elements:
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
NOTE: complement digits: new approaches String.prototype.padStart ES6 the string (maxLength, fillString = '') or String.prototype.padEnd (maxLength, fillString = '' ) to fill the string;
Third, the global filters
Global: All vue can be used.
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日
// 否则,就返回 年-月-日 时:分:秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
Note: When there are two local and global same name filter time, will be called to the principle of proximity, namely: local filter precedence over global filter is called!