演算プロパティ

2024 6/07

2023.08.03 2024.06.07

演算プロパティ(computed)は、動的なプロパティを作成できます。

記法

computed: {
　動的プロパティ名: function () {
　　return 動的処理
　},
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>computedについて</title>
  </head>
  <body>
    <div id="app">
      <div>{{ judgement }}</div>
      <div>{{ number }}</div>
      <button @click="increment">+1ボタン</button>
    </div>

    <script src="./js/computed.js"></script>
  </body>
</html>

Vue.createApp({
　data() {
　　return {
　　　number: 0,
　　};
　},
  methods: {
    increment() {
      this.number += 1;
    },
  },
  computed: {
    judgement: function () {
      // 三項演算子
      // 2でnumber値を割った値が0になる時[偶数] ならない時は[奇数]
      return this.number % 2 == 0 ? "偶数" : "奇数";
    },
  },
}).mount("#app");

出力結果