过滤器
- **概念 **
- vue 中的过滤器(filter) : 数据格式化 ,
- 也就是说,让数据按照我们规定的一种格式输出
- 比如 : 对于日期来说,将日期格式化转化为
年-月-日 小时:分:秒格式的过程
// 直接显示
<h1>{{ date }}</h1>
显示 : 2019-01-11T10:11:19.566Z
不是我们想要的
我们想要的 : 2019-01-11 18-11-53
- 全局过滤器 和 局部过滤器
- 说明 : 通过全局方式创建的过滤器，在任何一个 Vue 实例中都可以使用 (一般情况下,为了项目方便管理,都是一个 vue 实例)
- 注意点: 使用全局过滤器的时候，应该先创建全局过滤器，再创建 Vue 实例
- 局部创建的过滤器 只能在当前 vue 实例中使用
- 怎么注册 全局过滤器
// 第一个参数 : 过滤器的名字
// 第二个参数 : 是一个回调函数,只要使用过滤器的时候,这个回调函数就会执行
/// 通过回调函数的返回值得到格式化后的数据
Vue.filter('date', res => {
return '嘻嘻'
})
- **使用过滤器 示例 **
// 组件
<h1>时间戳-格式 {{ date2 | date }}</h1>
// js
Vue.filter('date', res => {
return `${res.getFullYear()}-${res.getMonth()}-${res.getDate()} ${res.getHours()}:${res.getMinutes()}:${res.getSeconds()}`
})
- moment 插件
-
使用
1. 安装 : `npm i moment` 2. 引入 : 3. 使用 -
日期 => 指定格式
moment(res).format('YYYY-MM-DD HH-mm-ss') -
时间戳 => 指定格式
moment(res).format('YYYY-MM-DD HH-mm-ss') -
// 全局 Vue.filter('date', res => { return moment(res).format('YYYY-MM-DD HH-mm-ss') })
- 参数问题
- 示例
<h1>时间戳-格式 {{ date2 | date('YYYY-MM-DD HH-mm-ss',888) }}</h1>
// 默认值
Vue.filter('date', (res, format = 'YYYY-MM-DD', arg) => {
console.log(arg)
return moment(res).format(format)
})
-
局部过滤器
在 vm 的配置项里写一个
filters
对应的是一个对象
filters: {
date(res, format = 'YYYY-MM-DD', arg) {
return moment(res).format(format)
}
}
10-过滤器的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
过滤器 : 格式化文本工具
作用 : 处理不合适的数据, 处理好之后, 返回给你合适的数据
怎么使用过滤器?
1. 先注册
- 全局过滤器 : 所有的vue实例里都 可以使用
- 局部过滤器 (私有) : 只能在当前注册的实例里使用
2. 再使用： '管道'|
格式: 要处理的数据 | 过滤器
-->
<div id="app">
<h1>{{ date | dateFilter }}</h1>
</div>
<script src="./vue.js"></script>
<script>
// 注册全局过滤器
// 注意点
// 1. 注册全局过滤器,一定要在实例vue之前注册 【因为下面要用到构造函数Vue，而且注册好了，下面所有的Vue实例都可以使用。】
// 2. 过滤器要有返回值, 返回的值就是过滤处理好的值
// 参数1 : 过滤器的名字
// 参数2 : 回调函数 当使用过滤器的时候
Vue.filter('dateFilter', () => '哈哈')
const vm = new Vue({
el: '#app',
data: {
date: new Date()
}
})
</script>
</body>
</html>
11-过滤器的处理日期.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
过滤器 : 格式化文本工具
作用 : 处理不合适的数据, 处理好之后,返回给你合适的数据
怎么使用过滤器?
1. 先注册
- 全局过滤器 : 所有的vue实例里都 可以使用
- 局部过滤器 : 只能在当前注册的实例里使用
2. 再使用 '管道' |
格式: 要处理的数据 | 过滤器
-->
<div id="app">
<h1>{{ date | dateFilter }}</h1>
</div>
<script src="./vue.js"></script>
<script>
// 注册全局过滤器
// 注意点
// 1. 注册全局过滤器,一定要在实例vue之前注册
// 2. 过滤器要有返回值, 返回的值就是过滤处理好的值
// 参数1 : 过滤器的名字
// 参数2 : 回调函数 当使用过滤器的时候
// 参数 : 要处理的数据
Vue.filter('dateFilter', res => {
return ` ${ res.getFullYear() } - ${ res.getMonth()+1 }`
})
const vm = new Vue({
el: '#app',
data: {
date: new Date()
}
})
</script>
</body>
</html>
12-过滤器配合moment使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
处理日期 配合 moment
1. 安装 : npm i moment
2. 引入
3. 使用
-->
<div id="app">
<h1>{{ date | dateFilter }}</h1>
<h1>{{ date1 | dateFilter }}</h1>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/moment/moment.js"></script>
<script>
// 注册过滤器
Vue.filter('dateFilter', res => {
return moment(res).format('YYYY-MM-DD HH:mm:ss')
})
const vm = new Vue({
el: '#app',
data: {
date: new Date,
date1: +new Date
}
})
</script>
</body>
</html>
13-过滤器的参数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
处理日期 配合 moment
1. 安装 : npm i moment
2. 引入
3. 使用
-->
<div id="app">
<!-- 过滤器是函数，当然可以传参 -->
<h1>{{ date | dateFilter('YYYY-MM-DD HH:mm:ss') }}</h1>
<h1>{{ date1 | dateFilter }}</h1>
<!-- <h1>{{ date1 | dateFilter('aa','bb') }}</h1> -->
</div>
<script src="./vue.js"></script>
<script src="./node_modules/moment/moment.js"></script>
<script>
// 注册过滤器 【添加默认参数。】
Vue.filter('dateFilter', (res, fStr = 'YYYY-MM-DD') => moment(res).format(fStr))
const vm = new Vue({
el: '#app',
data: {
date: new Date,
date1: +new Date
}
})
</script>
</body>
</html>
14-局部 过滤器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
注册局部过滤器
-->
<div id="app">
<h1>{{ date | dateFilter }}</h1>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/moment/moment.js"></script>
<script>
// 全局
// Vue.filter('dateFilter', res => {
// return '哈哈'
// })
// 局部过滤器是注册在vue实例里面
// filters 【属性】
const vm = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
dateFilter(res) {
return moment(res).format('YYYY-MM')
}
}
})
</script>
</body>
</html>
15-全局和局部的使用效果/区别.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- vm1管理的边界 -->
<div id="app1">
<!-- <h1>{{ date1 | dateFilter }}</h1> -->
<h1>{{ date1 | dateF }}</h1>
</div>
<!-- vm2管理的边界 -->
<div id="app2">
<!-- <h1>{{ date2 | dateFilter }}</h1> -->
<!-- dateF 在 app2中无法使用-->
<h2>{{ date2 | dateF }}</h2>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/moment/moment.js"></script>
<script>
// 注册一个全局过滤器
Vue.filter('dateFilter', res => {
return moment(res).format('YYYY-MM-DD')
})
// vm1
const vm1 = new Vue({
el: '#app1',
data: {
date1: new Date()
},
filters: {
dateF(res) {
return moment(res).format('YYYY')
}
}
})
// vm2
const vm2 = new Vue({
el: '#app2',
data: {
date2: new Date()
}
})
</script>
</body>
</html>