vue实现数字奇偶

Vue 实现数字奇偶判断

在 Vue 中判断数字的奇偶性可以通过计算属性或方法实现。以下是几种常见的方法：

使用计算属性

计算属性适合在模板中频繁使用的情况，会自动缓存结果。

<template>
  <div>
    <p>数字: {{ number }}</p>
    <p>奇偶性: {{ parity }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 7
    }
  },
  computed: {
    parity() {
      return this.number % 2 === 0 ? '偶数' : '奇数'
    }
  }
}
</script>

使用方法

方法适合需要动态判断或带参数的情况，但不会自动缓存。

<template>
  <div>
    <p>数字: {{ number }}</p>
    <p>奇偶性: {{ getParity(number) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 7
    }
  },
  methods: {
    getParity(num) {
      return num % 2 === 0 ? '偶数' : '奇数'
    }
  }
}
</script>

使用过滤器（Vue 2.x）

Vue 2.x 可以使用过滤器格式化显示内容。

<template>
  <div>
    <p>数字: {{ number }}</p>
    <p>奇偶性: {{ number | parity }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 7
    }
  },
  filters: {
    parity(num) {
      return num % 2 === 0 ? '偶数' : '奇数'
    }
  }
}
</script>

使用 v-if 条件渲染

可以直接在模板中使用条件渲染来显示不同的内容。

<template>
  <div>
    <p>数字: {{ number }}</p>
    <p v-if="number % 2 === 0">偶数</p>
    <p v-else>奇数</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 7
    }
  }
}
</script>

使用 TypeScript（Vue 3.x）

在 Vue 3.x 中结合 TypeScript 可以增加类型检查。

<template>
  <div>
    <p>数字: {{ number }}</p>
    <p>奇偶性: {{ parity }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      number: 7 as number
    }
  },
  computed: {
    parity(): string {
      return this.number % 2 === 0 ? '偶数' : '奇数'
    }
  }
})
</script>

以上方法都可以实现数字奇偶判断，选择哪种方式取决于具体的使用场景和 Vue 版本。