Vue過濾器

鎮屌在尋找人生目標的路上發表於2019-02-16
Vue過濾器

Vue過濾器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <div id="app">
            <h1>{{msg |msgFormat}}</h1>
        </div>
    </body>
    <script>
        Vue.filter(`msgFormat`,function(msg){
            return msg.replace(/學習/g,`討論`);
        })
        var vm = new Vue({
            el:`#app`,
            data:{
                msg:"我是一個愛學習的人，學習各種技術"
            }
        })
    </script>
</html>

使用Vue.filter()來對指定的元素進行過濾，function中傳遞的引數即是el表示式中的第一個值，

同時還可以傳遞多個引數

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <div id="app">
            <h1>{{msg |msgFormat(`討論`)}}</h1>
        </div>
    </body>
    <script>
        Vue.filter(`msgFormat`,function(msg,arg){
            return msg.replace(/學習/g,arg);
        })
        var vm = new Vue({
            el:`#app`,
            data:{
                msg:"我是一個愛學習的人，學習各種技術"
            }
        })
    </script>
</html>

同時可以進行多次過濾

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <div id="app">
            <h1>{{msg |msgFormat(`討論`)|test}}</h1>
        </div>
    </body>
    <script>
        Vue.filter(`msgFormat`,function(msg,arg){
            return msg.replace(/學習/g,arg);
        })
        Vue.filter(`test`,function(msg){
            return msg+`=====`;
        })
        var vm = new Vue({
            el:`#app`,
            data:{
                msg:"我是一個愛學習的人，學習各種技術"
            }
        })
    </script>
</html>

實際中經常會使用到的例項

  Vue.filter(`dateFormat`, function (dateStr, pattern = "") {
      // 根據給定的時間字串，得到特定的時間
      var dt = new Date(dateStr)

      //   yyyy-mm-dd
      var y = dt.getFullYear()
      var m = dt.getMonth() + 1
      var d = dt.getDate()

      // return y + `-` + m + `-` + d



      if (pattern.toLowerCase() === `yyyy-mm-dd`) {
        return `${y}-${m}-${d}`
      } else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    })

同時如果頁面中存在兩個Vue物件，針對每個物件可以定義私有過濾器，如下

    // 如何自定義一個私有的過濾器（區域性）
    var vm2 = new Vue({
      el: `#app2`,
      data: {
        dt: new Date()
      },
      methods: {},
      filters: { // 定義私有過濾器    過濾器有兩個 條件  【過濾器名稱 和 處理函式】
        // 過濾器呼叫的時候，採用的是就近原則，如果私有過濾器和全域性過濾器名稱一致了，這時候 優先呼叫私有過濾器
        dateFormat: function (dateStr, pattern = ``) {
          // 根據給定的時間字串，得到特定的時間
          var dt = new Date(dateStr)

          //   yyyy-mm-dd
          var y = dt.getFullYear()
          var m = (dt.getMonth() + 1).toString().padStart(2, `0`)
          var d = dt.getDate().toString().padStart(2, `0`)

          if (pattern.toLowerCase() === `yyyy-mm-dd`) {
            return `${y}-${m}-${d}`
          } else {
            var hh = dt.getHours().toString().padStart(2, `0`)
            var mm = dt.getMinutes().toString().padStart(2, `0`)
            var ss = dt.getSeconds().toString().padStart(2, `0`)

            return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
          }
        }
      },

相關文章