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

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

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

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

Vue.jsについては以下を参照してください！

 Traveler

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

https://traveler0401.com/vue-js/

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

算出プロパティとは

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

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

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

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

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

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

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

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

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

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

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

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

リストの絞り込み

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

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

まとめ

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

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

おすすめ本

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

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

基礎から学ぶ Vue.js

posted with カエレバ

mio シーアンドアール研究所 2018-05-29

Amazon

楽天市場