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

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

  • 2019年6月15日
  • 2021年3月17日
  • Vue.js
  • 44view

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

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

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

関連記事

最近話題のVue.jsですが、全くの初心者にはどういったものなのか分からないですよね。 僕もクライアント側は詳しくないので、Vue.jsについて勉強してみました。 ということで今回は、Vue.jsの基本的な使い方をサンプルコード[…]

Vue.jsの使い方を簡単に解説!メリットやサンプルコードも!

算出プロパティとは

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

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

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

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

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

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

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

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

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

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

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

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

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

リストの絞り込み

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

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

まとめ

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

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

おすすめ本

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

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

【Vue.js】算出プロパティの使い方!サンプルコードも!
フォローしてもらえると泣いて喜びます