https://blog.csdn.net/m0_64969829/article/details/122926823
前言
一、filter过滤器是什么？
过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
二、过滤器分为什么?
过滤器分为全局过滤器和局部过滤器
1.全局过滤器
全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。
// global-filter是过滤器名称 // 函数第一个参数是需要过滤的数据. // 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })
2.局部过滤器
局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
var app = new Vue({ el: '#app', data: { price:null, oldValue: '原始数据' }, methods: {}, // 定义组件过滤器 filters: { priceFmt(val,location) { switch(location) { case 'usa': return '$' + val break default: return val } } })
注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的
三、过滤器的使用方式?
过滤器的使用方式是，在双花括号或v-bind中通过一个管道符来拼接,
四、过滤器的应用场景?
项目中使用过滤器：时间，价钱
————————————————
效果案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 --> <div id="app"> <ul> <li v-for="user in userList"> {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gFilter}} </li> </ul> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> Vue.filter("gFilter", function (val) { if (val == 1) { return "男~~~"; } else { return "女~~~"; } }) let vm = new Vue({ el: "#app", data: { userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender: 0 } ] }, filters: { //// filters 定义局部过滤器，只可以在当前vue实例中使用 genderFilter(val) { if (val == 1) { return "男"; } else { return "女"; } } } }) </script> </body> </html>
运行效果：
二、过滤器分为什么?过滤器分为全局过滤器和局部过滤器
1.全局过滤器全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。
// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })12345672.局部过滤器局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
var app = new Vue({ el: '#app', data: { price:null, oldValue: '原始数据' }, methods: {}, // 定义组件过滤器 filters: { priceFmt(val,location) { switch(location) { case 'usa': return '$' + val break default: return val } } })12345678910111213141516171819注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的
三、过滤器的使用方式?过滤器的使用方式是，在双花括号或v-bind中通过一个管道符来拼接,
四、过滤器的应用场景?项目中使用过滤器：时间，价钱————————————————版权声明：本文为CSDN博主「@柠稔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/m0_64969829/article/details/122926823