【Vue.js】フィルタを使ってテキストの変換や加工を行う

今回はVue.jsのフィルタについて紹介していきたいと思います。

フィルタ（filters）とは

フィルタはテキストを変換したり加工して値を返すときに使用します。

加工というのもテキストベースの加工を指します。

フィルタの書き方

フィルタの書き方としてMustacheとv-bindを使う方法があります。

Mustacheの書き方

{{ フィルタに渡すデータ | フィルタ }}

下記の例だとフィルタに渡す値は200になります。

そして200を5倍にしたものをリターンさせます。

なので結果として1000が表示されます。

html

<div id="app">
        <div>{{ 200 | price }}</div>
</div>

js

<script>
var app = new Vue({
        el: "#app",
        filters: {
                price: function(val){
                        return val * 5;
                },
        },
})
</script>

v-bindの書き方

<div v-bind:id=”フィルタに渡すデータ | フィルタ”>

下記の例だとファイルの値を加工してカンマをつけた値段として表示させます。

値段を表示するときはtoLocaleString()を使用します。

html

<div id="app">
        <p>{{ 10000 | price }}</p>
        <div v-bind:data-price ="10000 | price"></div>
</div>

js

<script>
var app = new Vue({
        el: "#app",
        filters: {
                price: function(value){
                        return value.toLocaleString();
                },
        },
})
</script>

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。