filter过滤器的使用
在vue项目中我们经常需要对数据进行处理，比如需要将时间戳处理成时间节点，或者将时间节点处理成时间戳等等。
在项目中可以注册全局过滤器，也可以在组件中注册过滤器。
1、 注册全局过滤器
ps：注册全局过滤器，必须在new Vue实例之前注册。Vue.filter()
1 Vue.filter(名称，function(value){// 业务逻辑})
1 // 转为大小字母 2 Vue.filter('strToUpperCase', function (str) { 3 if (!str) { 4 return str; 5 } 6 return str.toString().toUpperCase(); 7 }); 8 // 转为小写字母 9 Vue.filter('strToLowerCase', function (str) { 10 if (!str) { 11 return str; 12 } 13 return str.toString().toLowerCase(); 14 }); 15 // vue实例 16 new Vue({ 17 render: h => h(App), 18 store, 19 router 20 }).$mount('#app');
2、组件中注册过滤器
1 <template> 2 <div> 3 <input type="text" v-model.number="val" /> 4 <div>输入框的值（小于10在前面补0）：{{val|addZero}}</div> 5 <div :title="val|addZero">鼠标悬浮在我上面显示的是输入框的值补0</div> 6 7 <div>{{'Hello'|addWorld}}</div> 8 </div> 9 </template> 10 <script> 11 export default { 12 data() { 13 return { 14 val: undefined 15 }; 16 }, 17 filters: { 18 // 数字补0 19 addZero(val) { 20 if (isNaN(val)) { 21 return val; 22 } else { 23 if (val < 10) { 24 return "0" + val; 25 } else { 26 return val; 27 } 28 } 29 }, 30 // Hello后面加 World 31 addWorld(str) { 32 if (str === "Hello") { 33 return str + " World!"; 34 } 35 } 36 }, 37 created() {}, 38 methods: {} 39 }; 40 </script> 41 <style scoped> 42 </style>
过滤器中的第一个参数是 “|” 前的值，过滤器中不能获取 this，因为当我们需要传参的时候，可以在使用中去传参，也可以过滤器叠在一起使用。
1 <template> 2 <div> 3 <!-- 过滤器也是可以传参数的 --> 4 <div>{{name}}的英文是：{{name|getEnglish(list)}}</div> 5 6 <!-- 过滤器叠在一起使用，name作为filter1的第一个参数，filter1返回的值作为filter2的第一个参数，最后显示filter2的返回值 --> 7 <div>叠加显示：{{name|filter1|filter2}}</div> 8 </div> 9 </template> 10 <script> 11 export default { 12 data() { 13 return { 14 name: "苹果", 15 list: [ 16 { name: "苹果", english: "apple" }, 17 { name: "香蕉", english: "banner" }, 18 { name: "橘子", english: "orange" } 19 ] 20 }; 21 }, 22 filters: { 23 getEnglish(val, list) { 24 // 过滤器中不能获得vue实例 25 console.log("this:", this); // undefined 26 var eng = ""; 27 list.forEach(one => { 28 if (one.name === val) { 29 eng = one.english; 30 } 31 }); 32 return eng; 33 }, 34 filter1(val) { 35 return val + "过滤器1"; 36 }, 37 filter2(val) { 38 return val + "过滤器2"; 39 } 40 }, 41 created() {}, 42 methods: {} 43 }; 44 </script> 45 <style scoped> 46 </style>
总结：
1. 全局过滤器注册必须在new Vue实例之前，Vue.filter(名称，function（val）{// 业务逻辑})
2. 组件中注册过滤器使用，filters:{名称1：function（val）{}，名称2：function（val）{}}，注意：组件中注册的单词是“f-i-l-t-e-r-s”，全局注册没有s。
3. 过滤器中不能获得 this，但使用时可以传参，也可以叠加使用过滤器，如：<div>{{name|filter1(list)|filter2}}</div>
