受け取った Props と Computed を組み合わせて使う

参考コード

  • props には this.propsName でアクセスできる
  • 今回は computed の中で this.height にアクセスして使用した
  • 身長によって色を変えている
/components/Height.vue
<template>
  <div :class="color">height {{height}}</div>
</template>

<script>
export default {
  props: {
    height: Number
  },
  computed: {
    color() {
      const height = this.height;
      if (height < 170) {
        return "blue";
      }
      return "green";
    }
  }
};
</script>

<style scoped>
.green {
  background: green;
}

.blue {
  background: blue;
}
</style>