ホームページ  >  記事  >  ウェブフロントエンド  >  vue.jsでフィルターを使用する方法

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

coldplay.xixi
coldplay.xixiオリジナル
2020-12-17 13:43:531854ブラウズ

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

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

このチュートリアルの動作環境: 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: &#39;#app&#39;,
                data: {
                    msg: &#39;曾经,我也是一个单纯的少年,单纯的我,傻傻的问,谁是世界上最单纯的男人&#39;
                },
                methods: {},
                //定义私用局部过滤器。只能在当前 vue 对象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+&#39;xxxxx&#39;;
                    }
                }
            });

注:

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

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

関連学習の推奨:

js ビデオ チュートリアル

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。