Vue详解（三）过滤器
? 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结构的简单的函数。在实际项目开发中根据实际需求，可以自己编写所需要的过滤器。
? 过滤器经常用在数据所需的格式化时使用：
- 字符串格式化。
- 日期时间的格式化。
例如：12.12.2050-10.10.10表示2050年12月12日，10点10分10秒，经过过滤器过滤（yyyy-MM-dd HH:mm:ss）后变为 2050-12-12 10:10:10
例如：字符串abcd经过filter，filter将小写字母变成大写字母的过滤器。最终展现在用户面前的字符串是ABCD。
? 过滤器最大的作用就是体现其复用性，如果前端处理的某些文本信息每一次都需要经过重复的特殊处理，那么一定要编写一个过滤器来使用。
?
1.全局过滤器的使用
全局过滤器指的是所有vm对象都能共享使用过滤器。过滤器能够使用在两个地方：
- （mustache）插值表达式。
- 指令（bind）
过滤器的语法：使用管道符“|”
1.1将所有的字母变成大写。
<!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">
<p>{{str1 | ucase}}</p>
</div>
<script>
Vue.filter('ucase', function (value) {
value = value.toUpperCase();
return value;
});
var vm =new Vue({
el:"#app",
data:{
"str1":"aaa"
}
})
</script>
</body>
</html>
1.2 定义格式化时间的全局过滤器
<!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">
<p>{{currentTime | dateTimeManager}}</p>
</div>
<script>
Vue.filter('dateTimeManager', function(dateTime) {
var y = dateTime.getFullYear();
var m = dateTime.getMonth().toString().padStart(2, "0");
var d = dateTime.getDate().toString().padStart(2, "0");
var h = dateTime.getHours().toString().padStart(2, "0");
var mm = dateTime.getMinutes().toString().padStart(2, "0");
var s = dateTime.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${h}-${mm}-${s}`;
});
var vm = new Vue({
el: "#app",
data: {
"currentTime": new Date()
}
})
</script>
</body>
</html>
1.3 过滤器在v-for中的使用
? 将所有的商品进行打折（打8折 打9折）。
<!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">
<p v-for="f in fruitList" ::key="f.id">
{{f.name}}---------{{f.price | disCount5}}
</p>
</div>
<script>
Vue.filter('disCount8', function(value) {
return parseInt(value) * 0.8;
});
Vue.filter('disCount5', function(value) {
return parseInt(value) * 0.5;
});
var vm = new Vue({
el: "#app",
data: {
"fruitList": [{
"id": "A0001",
"name": "苹果",
"price": 10
}, {
"id": "A0002",
"name": "菠萝",
"price": 15
}, {
"id": "A0003",
"name": "桃子",
"price": 8
}]
}
})
</script>
</body>
</html>
? 以上的案例，都是使用在插值表达式之中，除了使用在插值表达式之中外，过滤器还可以用在bind属性指令当中。该形式没有插值表达式使用的广泛。
1.4. 可以连续使用多个过滤器。
<!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">
<p>{{str1 | filter1 | filter2}}</p>
</div>
<script>
Vue.filter('filter1', function(value) {
return value.toUpperCase();
});
Vue.filter('filter2', function(value) {
return value + "123";
});
var vm = new Vue({
el: "#app",
data: {
"str1": "aaa"
}
})
</script>
</body>
</html>
2.私有过滤器的使用
? 私有过滤器指的是在指定的vm对象中来定义过滤器，该过滤器只在当前的vm对象中会发挥作用，其他的vm对象不能使用的。
? 语法：在vm对象中指定过滤器相关的属性和属性值。
vm
filters:{
filter1
filter2
....
}W
<!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">
<p>{{str1 | filter3}}</p>
</div>
<br>
<br>
<div id="app2">
<p>{{str1 | filter3}}</p>
</div>
<script>
Vue.filter('filter1', function(value) {
return value.toUpperCase();
});
Vue.filter('filter2', function(value) {
return value + "123";
});
var vm = new Vue({
el: "#app",
data: {
"str1": "aaa"
},
filters: {
filter3: function(value) {
return value + "bbb";
}
}
})
var vm1 = new Vue({
el: "#app2",
data: {
"str1": "aaa"
}
})
</script>
</body>
</html>
如果全局过滤器和私有过滤器的命名是一样的，那么默认使用的是私有过滤器。
? 系统在使用过滤器的时候，根据名称去找相应的过滤器，先找私有的过滤器，如果没有私有的，则继续通过该名称寻找全局过滤器。
? 这种方式称之为就近原则。（优先使用范围）
全局过滤器和私有过滤器是能够搭配在一起使用的。
<p>{{str1 | filter1 | filter2 | filter3}}</p>
<p>{{str1 | filter3 | filter2 | filter1}}</p>
? 可以同时使用多个过滤器。排在前面的过滤器的处理结果传递到下一个过滤器中继续进行后续处理。
|