vue中過濾器filter的講解

更新時間：2019年01月21日 09:22:59 作者：muzidigbig

今天小編就為大家分享一篇關于vue中過濾器filter的講解，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

<!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">
    <!-- {{}}中的|表示過濾器管道符,過濾器后面的為過濾函數(shù) -->
    <p>{{msg | msgFormat('瘋狂+1')}}</p>
    <!-- 多個過濾函數(shù)進行調用 -->
    <p>{{msg | msgFormat('瘋狂+1') | test}}</p>
    <h2>{{time | dateFormat}}</h2>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  //過濾器的定義語法
  //Vue.filter('過濾器的名稱',function () { })
  //過濾器中的function,第一個參數(shù)data，已經被規(guī)定死，永遠都是過濾器管道符前面?zhèn)鬟f過來的數(shù)據(jù)
  // 從第二個參數(shù)開始就是傳值
  // Vue.filter('過濾器名稱',function(data){
  //   return data+123
  // });
  //定義一個Vue全局的過濾器，名字：msgFormat
  Vue.filter('msgFormat',function(msg,param) {
    //字符出中的replace方法，第一個參數(shù)，出了寫一個字符串之外，還可以定義一個正則
    // 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(),
    },
    //定義私有過濾器，過濾器有兩個條件[過濾器名稱 和 處理函數(shù) ]
    filters: {
      /*
      過濾器調用的時候，采用的是就近原則，
      如果私有過濾器和全局過濾器名稱一致了，這時候優(yōu)先調用私有過濾器
      */
      //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}-$vvxyksv9kd`;
        if(param.toLowerCase() === 'yyyy-mm-dd'){
          return `${y}-${m}-$vvxyksv9kd`;
        }else{
          var hh = dt.getHours();
          var mm = (dt.getMinutes()).toString().padStart(2,'0');
          var ss = dt.getSeconds();
          return `${y}-${m}-$vvxyksv9kd ${hh}:${mm}:${ss}`
        }
      }
    },
    methods: { }
  })
</script>
</html>
[點擊并拖拽以移動]