vue--過濾器（filter）
阿新 • • 發佈：2018-11-04
<!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> <div id="app"> <!-- {{}}中的|表示過濾器管道符,過濾器後面的為過濾函式 --> <p>{{msg | msgFormat('瘋狂+1')}}</p> <!-- 多個過濾函式進行呼叫 --> <p>{{msg | msgFormat('瘋狂+1') | test}}</p> <h2>{{time | dateFormat}}</h2> </div> </body> <script src="./js/vue.js"></script> <script> //過濾器的定義語法 //Vue.filter('過濾器的名稱',function () { }) //過濾器中的function,第一個引數data，已經被規定死，永遠都是過濾器管道符前面傳遞過來的資料 // 從第二個引數開始就是傳值 // Vue.filter('過濾器名稱',function(data){ // return data+123 // }); //定義一個Vue全域性的過濾器，名字：msgFormat Vue.filter('msgFormat',function(msg,param) { //字元出中的replace方法，第一個引數，出了寫一個字串之外，還可以定義一個正則 // return msg.replace('單純','邪惡'); // return msg.replace(/單純/g,'邪惡') return msg.replace(/單純/g,param) }) Vue.filter('test',function(msg) { return msg+'love' }) //如何定義一個私有過濾（區域性） var vm = new Vue({ el: '#app', data: { msg: '我也是一個單純的少年，單純到自己很可愛，我也會喜歡你', time: new Date(), }, //定義私有過濾器，過濾器有兩個條件[過濾器名稱 和 處理函式 ] filters: { /* 過濾器呼叫的時候，採用的是就近原則， 如果私有過濾器和全域性過濾器名稱一致了，這時候優先呼叫私有過濾器 */ //param = '';es6的初始化值 dateFormat: function(time,param = ''){ var dt = new Date(time); // yyyy-mm-dd var y = dt.getFullYear(); // var m = dt.getMonth()+1; var m = (dt.getMonth()+1).toString().padStart(2,'0'); var d = dt.getDate(); // return y+'-'+m+'-'+d; //模板字串 // return `${y}-${m}-${d}`; if(param.toLowerCase() === 'yyyy-mm-dd'){ return `${y}-${m}-${d}`; }else{ var hh = dt.getHours(); var mm = (dt.getMinutes()).toString().padStart(2,'0'); var ss = dt.getSeconds(); return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } } }, methods: { } }) </script> </html> [點選並拖拽以移動]
效果圖
若有不足請多多指教！希望給您帶來幫助！