vue 过滤器 filters

<!-- 
	过滤器：	
		定义：对要显示的数据进行特定格式化之后再显示（使用与一些简单的逻辑）
		语法：
			1. 注册过滤器：Vue.filter.(name, callback) 或 new Vue{filters: {}}
			2. 使用过滤器：{{xxx 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
		备注：
			1. 过滤器也可以接收额外参数、多个过滤器也可以串联
			2. 并没有改变原本的数据，是产生新的对应的数据
	-->
<div id="root">
	<!-- 计算属性实现 -->
	<h1>时间：{{fmtStr}}</h1>
	<!-- 方法实现 -->
	<h1>时间：{{getFormatTime()}}</h1>
	<!-- 过滤器实现 -->
	<h1>时间：{{time | timeFormater}}</h1>
	<!-- 过滤器实现（传参） -->
	<h1>时间：{{time | timeFormater('YYYY年MM月DD日')}}</h1>
	<!-- 过滤器实现（多次过滤） -->
	<h1>时间：{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h1>
	<!-- 属性实现过滤 -->
	<p :x="msg | mySlice"></p>
	<input type="text" v-model="msg | mySlice">
</div>

全局的过滤器

// 全局的过滤器
Vue.filter('mySlice', value => {
	return value.slice(0, 5);
})

Vue 实例的过滤器

filters: {
	timeFormater(value, str = 'YYYY年MM月DD日 HH时mm分ss秒') {
		return dayjs(value).format(str);
	}
}