Vueの基礎勉強2-{{}}の中を変数の式として扱える-
はじめに
今回はVueの出力構文の中の文字を変数として扱う方法と、フィルターを用いた記述記法について勉強した。
See the Pen dyMbLrj by KKZoo (@kkzoo) on CodePen.
{{ a }}の中のaを単一式として扱える
今までの使い方はdataから単に出力するだけだったが{{ number + 1}}
のように記述することで単一式として扱えることがわかった。
フィルターを用いてみた
Vue.jsにはフィルターという概念があり、を用いることで、フィルター内に定義した動作を行なった後に出力をしてくれる。
例1) フィルターを用いて数字のカンマを打つ
~中略~ fliters{ localFilter(value){ return value.toLocaleString() } }
<p>{{ number | localFilter }}</p>
と記述することでフィルター内にあらかじめ用意した処理をnumber
に適用することができる。
例2) 長い文字列などを省略する
Vue.filter('readMore', function(text,length,suffix){ return text.substring(0, length) + suffix })
<p>{{ text | readMore}}</p>
またフィルターは複数使用することができるため、単一式でしか変数を扱えないというVueの記法をカバーする使い方もできる。
終わりに
単一式の変数として扱うことができるということで、今までよりも発想の自由度が上がったと思うので、扱える様にしていきたい。