获取当前时间戳
Date.now()
BootCDN
一个找第三方的库。
过滤器
| 是管道
过滤器本质上是一个函数
过滤器实现过程:将time作为参数传递给管道后的过滤器(模板里的过滤器可以有括号也可以没有括号),然后将过滤器计算结果作为最终结果进行显示。
过滤器参数
过滤器默认第一个参数是管道符前面的。
当只有一个参数时,即只有管道前面的参数,过滤器写法可以是{{time | timeFormater}}也可以是{{time | timeFormater()}},然后定义过滤器函数写一个形参。
当有两个参数时,即管道前参数和其它参数,需要{{time | timeFormater(‘YYYY-MM-DD’)}},然后定义过滤器函数地方写两个形参。形参可以有默认值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<h2>显示格式化后的时间</h2>
<h3>现在是 {{time}}</h3>
<!-- 计算属性实现 -->
<h3>计算属性:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>methods: {{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>过滤器: {{time | timeFormater}}</h3>
<!-- 过滤器实现 传参 -->
<h3>过滤器: {{time | timeFormater('YYYY-MM-DD')}}</h3>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
time:1658748753815,
},
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:{
timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@', value)
return dayjs(this.time).format(str)
},
}
})
</script>
</html>
技巧:多个过滤器之间可以串联
全局过滤器与局部过滤器
定义在如下vm中的是局部过滤器(使用filters)
如下形式定义为全局过滤器,注意一点:需要再定义Vue实例之前定义全局过滤器。
位置(插值语法和v-bind)
过滤器还可以使用在v-bind中,不过用的不多。
过滤器不能使用再v-model中,报错。
总结
过滤器:
定义:对显示的数据进行特定格式化后再显示(适用于一些简单的逻辑处理)
语法:
- 注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器:{{ xxx | 过滤器名 }} 或 v-bind:属性 = “xxx | 过滤器名”
备注: - 过滤器也可以接收额外参数、多个过滤器也可以串联
w Vue{filters:{}} - 使用过滤器:{{ xxx | 过滤器名 }} 或 v-bind:属性 = “xxx | 过滤器名”
备注: - 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据