Vue.js【算出プロパティ】

Vue.js【算出プロパティ】

算出プロパティとは？

↓こちらの記事がとてもわかりやすかった！ qiita.com

常に更新する必要のない値に関してはとても有効なようなので、使用すべきタイミングを見て適切に使っていきたい！

ということで、ちょっと勉強してみます。

算出プロパティの書き方

computed: {
  xxx:Function(){
    return a
  }
}

算出プロパティを設定することで、テンプレート側で

{{xxx}}

という感じで変数みたいに使えるみたいです。

やってみる

See the Pen bGGWeva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

基本。省略記法探しましたが、どうやらFunction()は省略できない？？

See the Pen GRRmjKM by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

inputのフォームから入力された値もしっかり反映してくれました！