vue 时间过滤器
过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}
2.使用过滤器: {{ xxx|过滤器名}}或v-bind:属性 ="xxx|过滤器名”
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue时间过滤器</title>
<!-- 引用vue文件 -->
<script type="text/javascript" src="../study01/js/vue.js"></script>
<!-- Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. -->
<script type="text/javascript" src="../study01/js/dayjs.min.js"></script>
<!--
Day.js 有很多 API 来解析、处理、校验、增减、展示时间和日期
dayjs('2018-08-08') // 解析
dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示
dayjs()
.set('month', 3)
.month() // 获取
dayjs().add(1, 'year') // 处理
dayjs().isBefore(dayjs()) // 查询 -->
</head>
<body>
<div id="root">
<h1>过滤后的时间格式</h1>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods 实现 -->
<h3>现在是:{{getFmtTime()}}</h3>
<!-- 过滤器 实现 | 管道符-->
<h3>现在是:{{time | timeFmatetr}}</h3>
<!-- 过滤器传参 -->
<h3>现在是:{{time | timeFmatetr('YYYY_MM_DD') | myCos}}</h3>
</div>
<!-- 第二个容器 div -->
<div id="root2">
<p>{{msjtext | myCos}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止运行时提示开发版本
//全局过滤器 关键词 filter
Vue.filter('myCos',function(value){
return value.slice(0,4)//截取前四位
}
)
new Vue({
el:"#root",
data:{
time:1637559917972 //时间戳
},
//计算属性
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部过滤器 用关键词：filters
filters:{
timeFmatetr(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
},
// myCos(value){
// return value.slice(0,2)//截取前四位
// }
}
})
// 第二个vue 实例’
new Vue({
el:'#root2',
data:{
msjtext:'wdgrvword'
}
})
</script>
</body>
</html>
