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> ~~~