How to use filter in vue.js

How to use filter in vue.js: 1. Define a global filter without parameters, the code is [Vue.filter('msgFormat', function(msg)]; 2. Define a global filter with parameters, the code It is [Vue.filter('msgFormat', funct].

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6, this method is applicable to all brands Computer.

[Related article recommendations: vue.js]

How to use filter in vue.js:

Filters in vue are divided into two types: local filters and global filters

1. Define global filters without parameters

       Vue.filter('msgFormat', function(msg) {    // msg 为固定的参数 即是你需要过滤的数据
            return msg.replace(/单纯/g, 'xxx')
       })

Complete example

    <div id="app">
            <p>{{ msg | msgFormat}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, &#39;xx&#39;)
            })
        </script>

2. Define global filter with parameters

       <div id="app">
            <p>{{ msg | msgFormat(&#39;疯狂&#39;,&#39;--&#39;)}}</p>
        </div>
        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
            Vue.filter(&#39;msgFormat&#39;, function(msg, arg, arg2) {
                // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, arg+arg2)
            })
      </script>

3. Local filter

The parameter sum of local filter The definition and use of parameters-free filters are the same as global filters. The only difference is that local filters are defined in the vue instance. The area they act on is also the area controlled by the vue instance [#app]

            // 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
                },
                methods: {},
                //定义私用局部过滤器。只能在当前 vue 对象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

Note:

1. When there are two filters with the same name, local and global, they will be called based on the proximity principle, that is, the local filter will be called before the global filter!

2. An expression can use multiple filters. Filters need to be separated by the pipe character "|". The order of execution is from left to right

Related learning Recommended: js video tutorial

The above is the detailed content of How to use filter in vue.js. For more information, please follow other related articles on the PHP Chinese website!