filtre
- concept
- vue Vous un filtre (filtre): le formatage des données,
- En d'autres termes, laisser la sortie de données dans un format spécifié par nous
- Par exemple: la date, la date sera formaté dans
年-月-日 小时:分:秒le processus de formatage
// 直接显示
<h1>{{ date }}</h1>
显示 : 2019-01-11T10:11:19.566Z
不是我们想要的
我们想要的 : 2019-01-11 18-11-53- Mondiale et les filtres de filtre local
- Description: au moyen d' un filtre de manière globale , dans un exemple Vue peut être utilisé (en général, afin de faciliter la gestion de projet, est un exemple vue)
- Précautions: Utiliser les filtres globaux, vous devez créer un filtre global, puis créer des instances Vue
- Filtre créé localement que dans l'exemple actuel vue
- Comment enregistrer des filtres globaux
// 第一个参数 : 过滤器的名字
// 第二个参数 : 是一个回调函数,只要使用过滤器的时候,这个回调函数就会执行
/// 通过回调函数的返回值得到格式化后的数据
Vue.filter('date', res => {
return '嘻嘻'
})- Exemple d'utilisation de filtre
// 组件
<h1>时间戳-格式 {{ date2 | date }}</h1>
// js
Vue.filter('date', res => {
return `${res.getFullYear()}-${res.getMonth()}-${res.getDate()} ${res.getHours()}:${res.getMinutes()}:${res.getSeconds()}`
})- plug instant
utilisation
1. 安装 : `npm i moment` 2. 引入 : 3. 使用Date => format spécifié
moment(res).format('YYYY-MM-DD HH-mm-ss')Timestamp => format spécifié
moment(res).format('YYYY-MM-DD HH-mm-ss')// 全局 Vue.filter('date', res => { return moment(res).format('YYYY-MM-DD HH-mm-ss') })
- problème de paramètre
- Exemples
<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)
})filtre partiel
Ecrire un élément de configuration de vm de
filters
correspondant à un objet
filters: {
date(res, format = 'YYYY-MM-DD', arg) {
return moment(res).format(format)
}
}Le filtre de base en utilisant .html 10-
<!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>date de traitement du filtre 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>Avec l'utilisation de filtres de 12 instant .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>paramètres de filtre .html 13-
<!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>.html 14- de filtre partiel
<!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 en utilisant les effets globaux et locaux / différence .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>