Vue -- filter 过滤器 · Vue&&TypeSprict--基础总结

[TOC] >[success] # filter -- 过滤器 ~~~ 1.Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：大胡子语法插值和 v-bind 表达式。 ~~~ >[danger] ##### 定义全局过滤器 -- Vue.filter ~~~ 1.使用 Vue.filter 创建全局过滤器 2.Vue.filter('过滤器名称', function (被过滤值做参数，过滤器函数的第一个参数) {}),要对这里做个说明，首先过滤器的参数可以是任意个数，具体的可以参考下面的案例 3.过滤器可以叠加使用 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <p>{{ msg| msgFormat|msgFormat2('参数1', '参数2') }}</p>  <p :data="msg|msgFormat"></p> </div> <script> /** Vue.filter 全局过滤器，第一个参数是过滤器函数， * 第二个参数函数，第一个参数是过滤内容，后面的是函数接受值 */ Vue.filter('msgFormat', function (msg) { return msg.replace(/是/g,'恩') }) // 过滤器可以传多个参数，可以叠加使用 Vue.filter('msgFormat2',function (msg,arg1,arg2) { return msg+arg1+arg2 }) var vm = new Vue({ el:'#app', data:{ msg:"我是测试过滤器的语句是" }, methods:{} }) </script> </body> </html> ~~~ >[danger] ##### 私有过滤器 ~~~ 1.私有过滤器仅局限于当前vue 对象 2.全局过滤器是对所有创建的vue对象都好用 3.私有有s，全局没有 4. 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app">  <p>{{ msg|msgFormat2('参数1', '参数2') }}</p> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:"我是测试过滤器的语句是" }, methods:{}, filters:{ msgFormat2:function (msg,arg1,arg2) { return msg+arg1+arg2 } } }) </script> </body> </html> ~~~ >[info] ## 过滤器是必须的么？ ~~~ 1.在工作中经常会遇到一些值需要被进行对应匹配，是否都是需要使用过滤器呢？这里给的答案肯定是不必要，下面给出一个常用的案例场景来实现类似过滤器的效果 ~~~ >[danger] ##### 案例 ~~~ 1.下面只是对一个思路，至于实际工作取决于个人使用 ~~~ ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> </style> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body> <div id="app">  <select v-model='selected'> <option v-for='op of oplist' :value='op.key'>{{op.value}}</option> </select>  <p>第一个下拉选中的值{{selected|privateMsgFormat}}</p>  <select v-model='selected1'> <option v-for='op of oplist1' :value='op.key'>{{op.value}}</option> </select> <p>第二个下拉选中的值{{mapOp[selected1]}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { selected: '', oplist: [{ key: 'sex', value: '性别', }, { key: 'age', value: '年龄' }], selected1: '', oplist1: [{ key: 'sex', value: '性别' }, { key: 'age', value: '年龄' }], // 不使用过滤器依然好用 mapOp: { sex: '性别', age: '年龄' } }, methods: { }, // 创建一个私有过滤属性 filters: { privateMsgFormat(msg) { const parma = { sex: '性别', age: '年龄' } return parma[msg] } } }) </script> </body> </html> ~~~