月間17,000PV達成! 収益は毎日発生中! ブログランキング上位! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

【Vue.js】算出プロパティの使い方!サンプルコードも!

  • 2018.08.14
  • IT
【Vue.js】算出プロパティの使い方!サンプルコードも!
Advertisement

 

Vue.jsに算出プロパティと言うのがありますよね

分かるようで分からない算出プロパティ。

今回はそんな算出プロパティを掘り下げていこうと思います!

 

 

 

算出プロパティとは

任意に処理を含めることのできるデータです。

 

 

算出プロパティを使うメリット

Vue.jsには、MustacheやディレクティブにJavaScriptが使用できます。

ただし、やたらに式を書き込むと可読性の悪いソースコードが出来上がります。

ですので、式を算出プロパティに記述することで可読性を向上させることができます

 

 

Advertisement

 

算出プロパティを使ってみよう!

では、早速算出プロパティを使ってみましょう!

算出プロパティは「computed」オプションに定義します。

前提として、index.htmlとmain.jsは同階層にあるものとします。

 

算出プロパティの簡単なサンプル

下記の算出プロパティは、widthプロパティの半分のサイズを計算してその結果を値にします。

 

算出プロパティを組み合わせる

算出プロパティを組み合わせてみます。

 

リストの絞り込み

算出プロパティには「キャッシュ機能」があります。

このキャッシュ機能を利用することで、リストの絞り込み機能を簡単に実装できます。

 

 

まとめ

算出プロパティをうまく活用することで、可読性の高いソースコードを書くことができます。

可読性が増すことで保守性・メンテナンス性が上がるので、Vue.jsを利用している方は是非活用していきましょう!

 

 

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

 

Travelerを知らないの?