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

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

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

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

1つ目は、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を加工します。加工するのは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メソッドの使い方

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

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

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

var app = new Vue({
el: '#app',
data: {
name: 'ogura',
age: 53
},
filters: {
format: function(value) {
return '御年' + value + '歳';
}
}
});

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メソッドの使い方

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

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

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA