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.카운터의 값이 바뀔 때만 반응합니다.methods: 페이지의 그림이 약간 바뀔 때 반응합니다.counter의 값computed에만 주목하고 싶기 때문이다.
그럼 안녕!