computedで動的なプロパティを使って表現する ❏Vue.js❏

3より大きいか小さいかを判断します。
その際、computedという新たなものを使います。

開発環境はJSFiddle
https://qiita.com/ITmanbow/items/9ae48d37aa5b847f1b3b

html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>

javascript

new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  computed: {
    lessThanThree() {
      return this.counter > 3 ? "3より上" : "3より下"
    }
  }
})

【解説】
{{ lessThanThree }}と二重中括弧の中にプロパティを入れます。
JS側でcomputedを記述し、lessThanThreeやreturnなどメソッドのようにその後を書きます。

メソッドとの違いは、
computed: this.counterの値が変わった時にだけ反応する。
methods: ページの描画が少しでも変わった時に反応する。

counterの値のみに注目したいのでcomputedを使います。

ではまた！