【Vue.js】算出プロパティの使い方

今日の記事では、算出プロパティの使い方を紹介します。

v-modelを使うと、入力された値を管理できることは前回学びました。

しかし、入力された値を表示することだけはできますが、計算ができません。

何かしらの計算を行うには、算出プロパティというものを使います。

以下のサイトが作ってみたものです。

 

上記のように数値を受け付けるフォームを作ります。

入力された数値の合計値を計算し、Totalの箇所に表示します。

数値が変化するに連れて、Totalの値も連動して変化します。

Vue.jsを使うことで、ユーザの入力に連動して動くダイナミック、動的なサイトが作れます。

表示用のテンプレートはこんな感じのコードです。

数値を入力するフォームに、v-modelを使っているところがポイントです。

数値の合計値をtotalとして表示しています。

次に算出プロパティを使う箇所を見ていきます。

computed:になっているのが算出プロパティを定義している場所です。

計算した値をtotalという名前でテンプレートに渡すようにしています。

おわり。

ABOUTこの記事をかいた人

のっくん

理系院卒で大企業の研究所に就職。 趣味はプログラミング、レアジョブ英会話、筋トレ、旅行。 Twitter:@yamagablog