过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

1.注册

1.1 全局过滤器

Vue.filter(name, (管道左边的数据，小括号里面的数据)=>{
	return 结果
})

1.2 局部过滤器

export default{
    filters:{
        name(管道左边的数据，小括号里面的数据){
            return 结果
        }
    }
}

2.使用

vue

{{ data中的键 | 过滤器名(实参2,...)}} 
或 
v-bind:属性 = "xxx | 过滤器名(实参2,...)"

备注：

过滤器可以接收额外参数，多个过滤器也可以串联
并没有改变原本的数据，而是产生新的对应的数据

处理时间的库moment体积较大 dayjs轻量级

vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,11)
		})
		new Vue({
            el:'#root',
            data:{
                time:1626750147900,
            },
			// 局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
	</script>
</html>

过滤器 ​

1.注册 ​

1.1 全局过滤器 ​

1.2 局部过滤器 ​

2.使用 ​

过滤器

1.注册

1.1 全局过滤器

1.2 局部过滤器

2.使用