Introduction to the use of vue.filter() in Vue (filtering)-JS Tutorial-php.cn

Introduction to the use of vue.filter() in Vue (filtering)

不言

Release： 2018-08-16 10:08:50

Original

9449 people have browsed it

This article brings you an introduction to the use of vue.filter() in Vue (filtering). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Vue filter

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat}}</h1>
        </p>
    </body>
    <script>
        Vue.filter('msgFormat',function(msg){
            return msg.replace(/学习/g,'讨论');
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"我是一个爱学习的人，学习各种技术"
            }
        })
    </script>
</html>

Copy after login

Use Vue.filter() to filter the specified element. The parameter passed in the function is the first value in the el expression,

You can also pass multiple parameters at the same time

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat('讨论')}}</h1>
        </p>
    </body>
    <script>
        Vue.filter('msgFormat',function(msg,arg){
            return msg.replace(/学习/g,arg);
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"我是一个爱学习的人，学习各种技术"
            }
        })
    </script>
</html>

Copy after login

You can filter multiple times at the same time

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <p id="app">
            <h1>{{msg |msgFormat('讨论')|test}}</h1>
        </p>
    </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>

Copy after login

Instances that are often used in practice

  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}`
      }
    })

Copy after login

At the same time, if there is Two Vue objects, private filters can be defined for each object, as follows

    // 如何自定义一个私有的过滤器（局部）
    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} ~~~~~~~`
          }
        }
      },

Copy after login

Related recommendations:

Detailed explanation of the use of Vue filters

$.grep() filter function array filtering in jQuery

Detailed example of how to create and use vue custom filters

The above is the detailed content of Introduction to the use of vue.filter() in Vue (filtering). For more information, please follow other related articles on the PHP Chinese website!