ホームページ > 記事 > ウェブフロントエンド > 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('msgFormat', function(msg) { // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则 return msg.replace(/单纯/g, 'xx') }) </script>
2. パラメータを使用してグローバル フィルタを定義します#
<div id="app"> <p>{{ msg | msgFormat('疯狂','--')}}</p> </div> <script> // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', 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. 式では複数のフィルターを使用できます。フィルターはパイプ文字 "|" で区切る必要があります。実行順序は左から右です関連学習の推奨:
以上がvue.jsでフィルターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。