过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:1.注册过滤器: 全局注册:Vue.filter(name,callback) 或 局部注册:new Vue{filters:{ }};
2.使用过滤器:{{ xxx | 过滤器名}}或 v-bind:属性 ="xxx |过滤器名"。
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联;
2.并没有改变原本的数据,是产生新的对应的数据。
得到一个时间戳,显示格式后的时间
计算属性实现、methods实现
<!-- 准备好一个容器 -->
<div id="root">
<h2>显示格式后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是:{{getFmtTime()}}</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
time:1679365525666 //时间戳
},
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')
}
}
})
</script>
过滤器实现
<!-- 准备好一个容器 -->
<div id="root">
<h2>显示格式后的时间</h2>
<!-- 过滤器实现 -->
<h3>现在是:{{time | timeFormater}}</h3>
<!-- 过滤器实现(传参) -->
<h3>现在是:{{time | timeFormater('YYYY年MM月DD日')}}</h3>
<!-- 过滤器实现(传参) -->
<h3>现在是:{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
time:1679365525666 //时间戳
},
filters:{
timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
return dayjs(value).format(str)
},
mySlice(value){
return value.slice(0,4)
}
}
}
)
</script>
传参过程
注:这里引入了一个插件:dayjs