<!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>Document</title>
<!-- 创建新的页面,记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
<!-- bootcdn,引用的dayjs -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<!--
过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
-->
<div id="root">
<h2>现在的时间是:</h2>
<h3>computed计算属性表达:{{fmtTime}}</h3>
<!-- getFmtTime()后面一定要跟括号的 -->
<h3>methods表达:{{getFmtTime()}}</h3>
<!-- 此时的time是data中的time -->
<h3>过滤器表达:{{time | timeForMater}}</h3>
<h3>过滤器表达(传参):{{time | timeForMater('YYYY-MM-DD')}}</h3>
<h3>过滤器表达(截取前4位):{{time | timeForMater('YYYY-MM-DD' ) | mySlice}} </h3>
<hr>
</div>
<div id='demo'>
<h2>filters改成全局变量</h2>
<h3>过滤器表达(截取前4位):{{num | mySlice}} </h3>
</div>
</body>
<script>
Vue.config.productionTip = false;
// Vue.filter('mySlice', function (value) {
// return value.slice(0, 4)
// })
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
new Vue({
el: '#root',
data: {
// 时间戳,记得不能加引号,切记!
time: 1621561377603,
},
computed: {
fmtTime() {
// dayjs后面不跟time,显示的是当前的时间。
// return dayjs().format('YYYY-MM-DD HH:mm:ss')
// 加完time中的时间戳,显示的是时间戳转化后的时间
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
methods: {
getFmtTime() {
// 注意事项和computed一致
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
}
},
filters: {
// !注意:filters局部变量
// 不跟val就是显示当前的时间
// timeForMater() {
// return dayjs().format('YYYY-MM-DD HH:mm:ss')
// }
// timeForMater(val) {
// return dayjs(val).format(str)
// }
// 现在是保留年月日,上面传参给的格式,str = 'YYYY- MM - DD HH: mm: ss'要加的,不然会变格式
timeForMater(val, str = 'YYYY- MM - DD HH: mm: ss') {
return dayjs(val).format(str)
},
// 截取年月日的前四位
// 局部变量。
// mySlice(val) {
// return val.slice(0, 4)
// }
}
})
new Vue({
el: '#demo',
data: {
num: '123456'
}
})
</script>
</html>
14.过滤器
最新推荐文章于 2024-08-29 09:47:43 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)