黑马vue---28、vue中全局过滤器的基本使用
一、总结
一句话总结：
vue中的过滤器可以传递参数（根据参数来过滤），也可以用管道符拼接多个过滤器：例如<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
1、vue中如何创建全局过滤器（在单个vue外）？
Vue.filter()，第一个参数是过滤器名称，第二个是过滤器的函数体
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 return msg.replace(/单纯/g, arg + arg2) })
2、vue中如何使用全局过滤器？
第一个是要使用过滤器的字符串，后面用管道符接多个过滤器，过滤器中可以接参数：<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
3、全局过滤器和私有过滤器的区别？
全局过滤器定义在全局，全局可以使用
私有过滤器定义在某个vue中，在这个vue控制的区域才能使用
4、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用？
局部过滤器优先于全局过滤器被调用
二、vue中全局过滤器的基本使用
1、效果图
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p> 15 </div> 16 17 <script> 18 // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat 19 Vue.filter('msgFormat', function (msg, arg, arg2) { 20 // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 21 return msg.replace(/单纯/g, arg + arg2) 22 }) 23 24 Vue.filter('test', function (msg) { 25 return msg + '========' 26 }) 27 28 29 // 创建 Vue 实例，得到 ViewModel 30 var vm = new Vue({ 31 el: '#app', 32 data: { 33 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人' 34 }, 35 methods: {} 36 }); 37 </script> 38 </body> 39 40 </html>
三、过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 私有
filters定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
全局过滤器
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
// 获取时分秒
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！