Vue過濾器

時間 2019-11-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表達式中的第一個值，css

同時還能夠傳遞多個參數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('討論')}}</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>

同時能夠進行屢次過濾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('討論')|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>

實際中常常會使用到的實例app

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} ~~~~~~~`
          }
        }
      },

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。