[Vue.js] Computed

13461 ワード
TIL computed frontend vue.js テキストリンク

Computed


Vue.jsのcomputedという概念を理解してみましょう.元のデータを計算データとして再作成および使用できるプロパティです.これは高利潤率のプロパティであり、次の例ではより詳細な情報を提供します.
Vue.jsの公式ドキュメントの計算プロパティ章の詳細については、を参照してください.

1.コード例（1）


コンポーネント内のFruits.vueファイルをApp.vueにインポートして、果物の配列を実現するコード.

1.1 App.vue

<template>
  <Fruits />
</template>
import Fruits from '~/components/Fruits'

export default {
  components: {
    Fruits
  }  
}

1.2 Fruits.vue


現在のsectionラベルのディレクトリはv-ifで、値はhasFruitです.computedとは、computedオプションで定義された特定のデータを追加の演算(data)によって定義し、その定義値を返すために使用される新しいデータを指す.つまり、これは計算された(計算された)データです.
<template>
  <section v-if="hasFruit">
    <h1>Fruits</h1>
    <ul>
      <li
        v-for="fruit in fruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: {
    hasFruit() {
      return this.fruits.length > 0
    }
  }
}
</script>

2.サンプルコード（2）


2.1 Fruits.vue


今回は,this.fruits.length > 0の元のデータとfruitsの計算データを用いてliタグreverseFruitsのディレクトリ属性として追加し,逆さまの配列に戻す.
<template>
  <section v-if="hasFruit">  // computed 속성 추가
    <h1>Fruits</h1>
    <ul>
      <li
        v-for="fruit in fruits"
        :key="fruit">
        {{ fruit }}
      </li>
    </ul>
  </section>
  <section>
    <h1>Reverse Fruits</h1>
    <ul>
      <li
        v-for="fruit in reverseFruits"
        :key="fruit"> // v-for 디렉티브에 computed 속성 추가
        {{ fruit }}
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  },
  computed: { // coumputed 데이터
    hasFruit() {
      return this.fruits.length > 0
    },
    reverseFruits() {
      return this.fruits.map(fruit => {
        return fruit.split('').reverse().join('')
      })
    }
  }
}
</script>

2.2画面出力



前に示したように、文字が逆さまに出力されていることを確認してください.
react color change
[リアクション](Reactions)の起動と構築