作用:实现一些简单的逻辑,前面的结果作为输入值给后面(与管道符类似)
语法
1、定义,默认带value
//局部,vue中, 有返回值
filters:{
过滤器名(value){
return 值
}
}
//全局,全局过滤器定义在vm前面
Vue.filter(过滤器名称, function(value){})
2、使用
// 可以传递参数
{{xxx | 过滤器名称(参数)}}
注意:过滤器可以单个使用,也可以串联使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="container">
<h2>时间格式1:{{showTime | fmtTime}}</h2>
<h2>时间格式2:{{showTime | fmtTime('YYYY-MM-DD')}}</h2>
<h2>时间格式3:{{showTime | fmtTime('YYYY-MM-DD') | truncatTime }}</h2>
</div>
<script type="text/javascript">
// 全局过滤器
Vue.filter("truncatTime", function(value){
return value.slice(0, 4)
})
new Vue({
el:"#container",
data:{
showTime: 1735647365663
},
filters:{
// str 默认参数 赋值
fmtTime(value, str='YYYY-MM-DD HH:mm:ss'){
return dayjs(value).format(str)
}
}
})
</script>
</body>
</html>