2022.02.21Vue.jsでcomputedを使用する方法について書いています。API)で実際に動作確認したサンプルコードを載せています。公式の算出プロパティについて書いてあるリンクは下記になります。API)動作確認をする算出プロパティを使用したサンプルコード(v2)Vue.jsの算出プロパティ(computed)とは?Vue.jsの算出プロパティ(computed)は、ちょっと複雑なデータを表現する時に使用すると便利です。価格と税金をデータとして持っていて、金額を計算するには下記のように書くと思います。},};</script>上記はprice変数に100を入れて、taxが10%として、テンプレート内で計算して表示しています。表示される内容は「税込価格:110」となります。これを算出プロパティを使うことで、下記のように簡単に表現することが可能です。}};</script>上記では算出プロパティ(computed)を作って、その中にtotalValueを書きました。プロパティなので、そのまま定義したtotalValueを書くだけです。}}の呼び出しだけで表示が済みます。メソッドとの違いは?メソッドでも同じように書くことができます。}};</script>この場合の結果も先ほどと同じになります。メソッドなので、テンプレートからの呼び出し時に丸括弧「()」が必要になります。メソッドなので引数があれば渡すことも可能です。メソッド(methods)と算出プロパティ(computed)の違いは算出プロパティは処理内容をキャッシュしますが、メソッドは処理内容をキャッシュしません。公式のこのあたりに書いています。算出プロパティは、定義したプロパティの内容が変わらない場合は、一度計算された内容が表示されるということのようです。このため、高速化が期待できるのではないかと思います。簡単な内容で、引数を取らないものは算出プロパティとして定義しておくと良さそうです。APIを使用して、算出プロパティを使用したサンプルコードを書いてみました。}};</script>コードの解説です。テキストボックスにv-modelを設定して、price変数を設定しています。初期値で100が表示されますが、テキストボックスの内容を変えることで、price変数の内容も更新されます。算出プロパティ(computed)で定義しているtotalValueの表示値も更新され、再表示されます。スクリプトの中を確認します。最初にimport文を使用して、refとcomputedを使えるように呼んできています。setupメソッドの最初で、priceとtax変数を定義して、それぞれ100と1.1で初期化しています。tax.value)})totalValueには2つの変数の値を掛けたものを四捨五入して返しています。最後にそれぞれ定義したものを最後にreturnで返して、画面で使えるようにしています。動作確認をする価格を変えると、再度処理されて表示が変わることが確認できました。算出プロパティを使用したサンプルコード(v2)上記と同じ内容のコードをVue2で書いてみました。//Vue.js記事一覧へVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクJavaScript[JavaScript入門]コメントとは?コメントを書く方法!JavaScriptでコメントを書く方法と、コメントアウトについて書いています。JavaScriptのコメントとは?コメントは、スクリプトに処理の内容などの説明を書いておけるものです。ソースコードの内容に説明を入れることにより、複雑な処理の...PythonPythonの学習におすすめの本5選【現役エンジニア選定】Pythonの学習におすすめの本を選定してみました。最初にPythonについて簡単に説明して、その後にそれぞれの本をレビューしました。最後にどの本が良いかの考察をまとめています。けを分け...PHPPHPで文字列を含むか検索する5つの方法!PHPで特定の文字列を含むか検索する方法について書いています。下記の関数を使って、特定文字列が文字列に含まれるか検索することが可能です。checkoutを使用する方法について書いています。checkoutコマンドを実際に使用して解説しています。解説している内容は下記になります。・ブランチを切り替える・リモートからブランチを取得して切り替える...PHPPHPで文字列を置換する4つの方法!(str_replaceなど)PHPで文字列を置換する方法について書いています。PHPで文字列を置換するには、下記の関数を使うことができます。・str_replace関数・str_ireplace関数・preg_replace関数・strtr関数サンプルコードは、PHP...VB.NETVB.NETのリストを結合する2つの方法!VB.NETでリストの要素を結合する方法について書いています。リストの要素を結合したいときには、下記の2つのメソッドを使うことができます。・Concatメソッド・AddRangeメソッドConcatメソッドで結合するリストからConcatメ...PHPPHPの配列に要素を追加する3つの方法!(array_push)PHPの配列に要素を追加する方法について書いています。PHPの配列に要素を追加するときには、下記の方法を使います。・array_push関数を使う・array_splice関数を使う・代入演算子で入れる記載しているサンプルコードはPHPのバ...PHPPHPの配列に値が含まれるか検索して確認する2つの方法!PHPで配列に値が含まれるか検索して、確認する方法について書いています。下記の関数を使って、特定の値が配列に含まれているかを確認します。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。API)動作確認をする算出プロパティを使用したサンプルコード(v2)Vue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。