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の記法をカバーする使い方もできる。

終わりに

単一式の変数として扱うことができるということで、今までよりも発想の自由度が上がったと思うので、扱える様にしていきたい。