vue.jsでフィルターを使用する方法

vue.js でフィルターを使用する方法: 1. パラメーターを使用せずにグローバル フィルターを定義します。コードは [Vue.filter('msgFormat', function(msg)]; 2. パラメーターを使用してグローバル フィルターを定義します。 , コードは [Vue.filter('msgFormat', funct] です。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9。 6、この方法はすべてのブランドのコンピューターに適用できます。

[関連記事の推奨事項: vue.js]

vue でフィルターを使用する方法.js:

vue のフィルターは、ローカル フィルターとグローバル フィルターの 2 つのタイプに分類されます

1. パラメーターなしでグローバル フィルターを定義します

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

完全な例

    <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. パラメータを使用してグローバル フィルタを定義します#

       <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. ローカル フィルタ

パラメータの合計ローカル フィルターの定義と使用法はグローバル フィルターと同じです。唯一の違いは、ローカル フィルターが vue インスタンスで定義されていることです。ローカル フィルターが作用する領域は、vue インスタンスによって制御される領域でもあります [#app ]

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

注:

1. 同じ名前の 2 つのフィルター (ローカルとグローバル) がある場合、それらは近接性の原則に基づいて呼び出されます。 , ローカル フィルターはグローバル フィルターの前に呼び出されます!

2. 式では複数のフィルターを使用できます。フィルターはパイプ文字 "|" で区切る必要があります。実行順序は左から右です

関連学習の推奨:

js ビデオ チュートリアル

以上がvue.jsでフィルターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。