ラッキーな日々

望んでも望んでも、叶わないから望み続ける

vue 共通

教えてフクロウさん computedってナニ?

投稿日:

Pocket

computedって出てきたけど読み飛ばしてたらまた出てきたけどわからん

教えてフクロウさん computedってナニ?

computed:算出プロパティのこと。既存のプロパティを演算(算出)した結果を取得できる。

ほんとは全然わかってないけど、ここ見てたら図がたくさんあってなんかわかりそうになってきた。

computedとmethodsを使った簡単な検索機能

こっちもなんかわかったような気になるぞ。

算出プロパティ

こんなこと書いてあるぞ

テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。例えば:

{{ message.split(”).reverse().join(”) }}

こうなってくると、テンプレートはシンプルでも宣言的でもなくなってしまっています。しばらく眺めて、やっとこれが message を逆にして表示していることに気付くでしょう。逆にしたメッセージをテンプレートの中で 2 回以上使おうとすると、問題はより深刻になります。

上記の理由から、複雑なロジックには算出プロパティを利用すべきです。

基本的な例

Original message: “{{ message }}”

Computed reversed message: “{{ reversedMessage }}”

var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// 算出 getter 関数
reversedMessage: function () {
// this は vm インスタンスを指します
return this.message.split(”).reverse().join(”)
}
}
})

出典 算出プロパティとウォッチャ (https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)

javascript filter関数も教えて

Array.prototype.filter()
引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

出典 開発者向けのウェブ技術  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

スポンサーリンク
スポンサーリンク

関連記事

クリオネさん label for=”ID名”って何

label要素 フォーム部品とラベルを関連付けることができます。

お名前: 出典:部品とラベルを関連付ける URL https://w …

ねずみさん リセットエーピーアイ じゃなかったんだね。

REST APIを読み飛ばしていたら 調べるのも面倒くさくREST APIをRESET API(リセットエーピーアイ)だと思い長い間、なんかリセットするAPIなんだろうなと文脈もつながらないまま斜め読 …

イヌワシさんから注意が来た もうやめとけビュージェーエス

この森は、無知のものが抜けれるものではない。 最終目標のPWA化には、SSL通信が必須じゃ。 使っているレンタルサーバーは、どのプランもSSL通信には対応しとらんぞ。 やってもむだじゃ。 いのちがある …

疲れたで

教えてタヌキさん インスタンスって何 クラスって何?

インスタンスとクラス インスタンス(instance)は、「実体」や「実例」「事例」のこと。実際のメモリが割り当てられたデータ。 クラスは、「型」や「設計図」、金型というかテンプレート的なもの。 イン …

調べよう

ありがとう

【プロフィール】
はじめまして EveryDayisaGoodDayです。日本語に直すと日々是好日となります。
個人事業者です。望んでいたわけではないですが、いつのまにかそうなっていました。

病気をしてから、物忘れがひどいのでこのブログは私的な備忘録です。
さっきやったことも忘れるのでブログ自体も迷走中。
望んでも 望んでも 叶わないから望み続ける。

ペットのおうち

鍵開け 鍵修理 24時間 緊急対応
24時間対応鍵トラブル緊急サービスの全国展開おなじみのマルチ救急24岡山市鍵トラブル修理サービスホームページがリニューアル。

岡山市で、お住い 金庫 バイク 原付の鍵トラブルに緊急対応。

  • 鍵をなくしてドアが開けられない。
  • 鍵穴の不具合で鍵が回らない。
  • 鍵が折れた

鍵のトラブルでお困りならお気軽にお問合せ下さい。

深夜の突然の水漏れやトイレのつまりに困ったことは、ありませんか?

全国24時間対応で水漏れ修理 トイレつまりに深夜でも緊急に出動してくれる水道修理サービスがあります。

水漏れ 排水つまりでお困りならこちらの安心の水道修理サービスをご利用してみてください。