Home > Article > Web Front-end > Introduction to the use of vue.filter() in Vue (filtering)

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

不言Original: 2018-08-16 10:08:509453browse

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>

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>

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>

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

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

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!

jquery Filter function 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the function function of js? How to use function in jsNext article：What is the function function of js? How to use function in js

See more

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

Related articles