Comment utiliser le filtre dans vue.js

Comment utiliser le filtre dans vue.js : 1. Définir un filtre global sans paramètres, le code est [Vue.filter('msgFormat', function(msg)]; 2. Définir un filtre global avec paramètres , le code Il s'agit de [Vue.filter('msgFormat', funct].

L'environnement d'exploitation de ce tutoriel : système Windows 7, Vue version 2.9. 6, cette méthode convient à toutes les marques d'ordinateurs

【Articles connexes recommandés : vue.js】

Comment utiliser le filtre avec vue. .js :

Les filtres dans vue sont divisés en deux types : les filtres locaux et les filtres globaux

1 Définir un filtre global sans paramètres

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

.

Exemple complet

    <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. Définir un filtre global avec des paramètres

       <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.Le filtre local

Le paramétré. somme du filtre local La définition et l'utilisation d'aucun paramètre sont les mêmes que celles du filtre global. La seule différence est que le filtre local est défini dans l'instance de vue. La zone sur laquelle il agit est également la zone contrôlée par l'instance de vue [#. app]

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

Remarque :

1 Lorsqu'il y a deux filtres du même nom, local et global, ils seront appelés selon le principe de proximité, c'est-à-dire que le filtre local sera appelé avant le filtre global !

2. Une expression peut utiliser plusieurs filtres. Les filtres doivent être séparés par le caractère vertical "|". à droite

Apprentissage connexe Recommandé : Tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!