フィルタ
- コンセプト
- データフォーマット：フィルタ（フィルタ）VUE
- 言い換えれば、当方指定の形式でデータ出力をしましょう
- たとえば、次の日の日付はにフォーマットする
年-月-日 小时:分:秒フォーマット工程
// 直接显示
<h1>{{ date }}</h1>
显示 : 2019-01-11T10:11:19.566Z
不是我们想要的
我们想要的 : 2019-01-11 18-11-53- グローバルとローカルフィルタフィルタ
- 説明：によってグローバル様式でフィルタ、任意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()}`
})- プラグ瞬間
使用
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)
}
}.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>フィルタ処理日、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瞬間の.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>フィルタパラメータは、.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>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>