codeのっくん【Vue.js】算出プロパティの使い方ツイートシェアはてブ送るPocket今日の記事では、算出プロパティの使い方を紹介します。v-modelを使うと、入力された値を管理できることは前回学びました。入力された値を表示することだけはできますが、計算ができません。何かしらの計算を行うには、算出プロパティというものを使います。以下のサイトが作ってみたものです。上記のように数値を受け付けるフォームを作ります。入力された数値の合計値を計算し、Totalの箇所に表示します。数値が変化するに連れて、Totalの値も連動して変化します。Vue.jsを使うことで、ユーザの入力に連動して動くダイナミック、動的なサイトが作れます。表示用のテンプレートはこんな感じのコードです。%}数値を入力するフォームに、v-modelを使っているところがポイントです。数値の合計値をtotalとして表示しています。次に算出プロパティを使う箇所を見ていきます。fe;}}});computed:になっているのが算出プロパティを定義している場所です。計算した値をtotalという名前でテンプレートに渡すようにしています。コメントをキャンセルメールアドレスが公開されることはありません。Barに行ってきたRECOMMENDこちらの記事も人気です。2019.1.3【Keras】MNISTのアラビア数字を識別するABOUTこの記事をかいた人のっくんのっくん。理系院卒で大企業に就職。趣味は、読書、プログラミング、英会話、筋トレ、旅行。2020.2.15【脳科学】人はなぜキレるのか調べてみたプロフィールのっくん。理系院卒で大企業に就職。趣味は、読書、プログラミング、英会話、筋トレ、旅行。