Vue.jsのfilterメソッドの使い方

filterメソッドを使うと、メソッド名通りにfilterしてデータを加工してくれます。

登録方法は2通りあります。

１つ目は、Vue.filterで登録します。

第一引数	第二引数
フィルター名	関数

フィルター名を使用して、関数が実行される仕組みとなっております。

以下、formatというフィルター名で関数を登録しています。

	Vue.filter('format', function(value){
	return '御年' + value + '歳';
	});

	// new Vueより上にコーディングすること

	var app = new Vue({
	el: '#app',
	data: {
	name: 'ogura',
	age: 53
	}
	});

view raw

gistfile1.txt

hosted with ❤ by GitHub

Vue.filterメソッドの場合は、new Vue()～より先に定義しないといけないです。

フィルターを定義したら次は実際に使ってみます。

使い方は、mustache（マスタッシュ）内に|（パイプ）で繋げます。

{{age | format}}

みたいな感じです。これはageを加工します。加工するのはfilterの第二引数の関数になります。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	{{name}}:{{age\|format}}
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	Vue.filter('format', function(value){
	return '御年' + value + '歳';
	});

	var app = new Vue({
	el: '#app',
	data: {
	name: 'ogura',
	age: 53
	}
	});
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

ブラウザで見るとこんな感じです！データがfilter機能で加工されています！

Vue.jsのfilterメソッドの使い方

２つ目の方法として、ローカルスコープでfilterを登録する方法があります。filtersプロパティを使用します。

このプロパティで指定したフィルターはその要素内でのみしか使えませんが、コンポーネント思考ではこちらがお勧めです。

view raw

gistfile1.txt

hosted with ❤ by GitHub

全体のhtmlは以下です。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="app">
	{{name}}:{{age\|format}}
	</div>
	<script src="https://jp.vuejs.org/js/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	name: 'ogura',
	age: 53
	},
	filters: {
	format: function(value) {
	return '御年' + value + '歳';
	}
	}
	});
	</script>
	</body>
	</html>

view raw

gistfile1.txt

hosted with ❤ by GitHub

ブラウザは以下のように表示されます。

Vue.jsのfilterメソッドの使い方

次回はcomputedという算出プロパティについて勉強してみます！

和歌山大学工学部卒業。フリーターのち正社員として勤務しています！

vue.js勉強中です。

コメント