JSFiddle - React, Tailwind, and code Playground

by furiblog

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="number" v-model="number">
  <p>{{ numberJudgment }}</p>
  <p>{{ numberJudgmentMethod() }}</p>
  
  <input type="number" v-model="otherNumber">
  <p>numberJudgment実行回数：{{ computedCount }}</p>
  <p>numberJudgmentMethod実行回数：{{ methodsCount }}</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    number: 1,
    otherNumber: 1,
    computedCount: 0,
    methodsCount: 0
  },
  computed: {
    numberJudgment() {
      this.computedCount++;
      return this.number % 2 === 1 ? '奇数です' : '偶数です';
    }
  },
  methods: {
    numberJudgmentMethod() {
      this.methodsCount++;
      return this.number % 2 === 1 ? '奇数です' : '偶数です';
    }
  }
});