过滤器案例：
<!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 src="./../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--
过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。
过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,示例代码如下:
vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，
可以采用下面方法。在 beforeCreate的钩子函数中将vue实例赋值给全局变量_self，
然后filters中即可通过_self获取data中数据
过滤器的注意点
1.要定义到filters 节点下，本质是一个函数
2.在过滤器函数中，-定要有return值
-->
<!--在双花括号中通过“管道符"调用capitalize 过滤器，对message的值进行格式化-->
<p>{{ message | capitalize }}</p>
<!--在v-bind中通过“管道符"调用formatId 过滤器，对rawId的进行格式化-->
<div v-bind:id="rawId | formatld"></div>
</div>
<script>
const VIEW_MODEL = new Vue({
el: '#app', // 控制的元素实例，
data: {
message: '1003',
rawId: 1001,
list: [
{ id: '1001', name: '类型1'},
{ id: '1002', name: '类型2'},
{ id: '1003', name: '类型3'},
{ id: '1004', name: '类型4'},
{ id: '1005', name: '类型5'},
{ id: '1006', name: '类型6'},
],
list2: [
{ id: 1001, name: '主键1'},
{ id: 1002, name: '主键2'},
{ id: 1003, name: '主键3'},
{ id: 1004, name: '主键4'},
{ id: 1005, name: '主键5'},
{ id: 1006, name: '主键6'},
]
},
beforeCreate() {
// 使用钩子函数把vue实例赋值给_self变量
_self = this
},
filters: {
capitalize(val) {
// 过滤器方法一定要有返回值, 入参就是管道符前面的变量
const content = '无类型'
if (!val) return content
// 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
// https://blog.csdn.net/to_the_Future/article/details/122083980
const type = _self.list.find(x => x.id === val)
if (!type) return content
return type.name
},
formatld(val) {
const content = '无主键'
if (!val) return content
const type = _self.list2.find(x => x.id === val)
if (!type) return content
return type.name
}
}
})
</script>
</body>
</html>
全局过滤器和实例过滤器
<!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 src="./../lib/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>
</head>
<body>
<!--
创建全局过滤器，对每一个Vue实例都可以处理
Vue.filter('过滤器名称', val => {
if (!val) return ''
const type = list.find(x => x.id === val)
if (!type) return ''
return type.name
})
如果局部过滤器和全局过滤器一样名字，则调用局部过滤器
Vue支持连续过滤器
类似linux的管道符，第一个过滤器完成后交给后面的过滤器继续执行
{{item.time | filterFunctionA | filterFunctionB | ... }}
过滤器参数传递问题
1、首个参数一定是管道符传递过来的参数，后面的入参才是自定义的
{{item.time | filterFunction(val1, val2, ...) }}
filters: {
filterFunction(arg1, arg2, ...) {
}
}
-->
<div id="app">
<p>{{ message | capitalize }}</p>
<p>{{ createTime | dateFormat }}</p>
</div>
<div id="app2">
<p>{{ message | capitalize }}</p>
</div>
<script>
// dayJS资源引入
// const DAYJS = require('dayjs')
const list = [
{ id: '1001', name: '全局类型1'},
{ id: '1002', name: '全局类型2'},
{ id: '1003', name: '全局类型3'},
{ id: '1004', name: '全局类型4'},
{ id: '1005', name: '全局类型5'},
{ id: '1006', name: '全局类型6'}
]
Vue.filter('capitalize', val => {
if (!val) return ''
const type = list.find(x => x.id === val)
if (!type) return ''
return type.name
})
// 全局的时间过滤器
Vue.filter('dateFormat', val => {
// 可以安装MomentJS处理
// DAYJS处理
const dateString = dayjs(val).format('YYYY-MM-DD')
console.log(dateString)
return dateString
})
const VIEW_MODEL1 = new Vue({
el: '#app',
data: {
message: '1003',
createTime: new Date(),
list: [
{ id: '1001', name: '局部类型1'},
{ id: '1002', name: '局部类型2'},
{ id: '1003', name: '局部类型3'},
{ id: '1004', name: '局部类型4'},
{ id: '1005', name: '局部类型5'},
{ id: '1006', name: '局部类型6'},
],
},
beforeCreate() {
// 使用钩子函数把vue实例赋值给_self变量
_self = this
},
filters: {
capitalize(val) {
// 过滤器方法一定要有返回值, 入参就是管道符前面的变量
const content = '无类型'
if (!val) return content
// 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问
// https://blog.csdn.net/to_the_Future/article/details/122083980
const type = _self.list.find(x => x.id === val)
if (!type) return content
return type.name
},
}
})
const VIEW_MODEL2 = new Vue({
el: '#app2',
data: {
message: '1005',
}
})
</script>
</body>
</html>
