用vue实现生肖判断

实现思路

通过用户输入的年份计算对应的生肖，生肖按照12年一个周期循环，可通过年份与基准年份的差值取模12来确定。

代码实现

<template>
  <div>
    <input v-model="inputYear" type="number" placeholder="请输入年份" />
    <button @click="calculateZodiac">计算生肖</button>
    <p v-if="zodiac">生肖：{{ zodiac }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputYear: '',
      zodiac: ''
    }
  },
  methods: {
    calculateZodiac() {
      const zodiacs = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
      const baseYear = 2020 // 2020年是鼠年，作为基准年份
      const year = parseInt(this.inputYear)

      if (isNaN(year)) {
        alert('请输入有效的年份')
        return
      }

      const offset = (year - baseYear) % 12
      const index = offset >= 0 ? offset : offset + 12
      this.zodiac = zodiacs[index]
    }
  }
}
</script>

实现说明

1. 生肖顺序固定为鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪，12年一个循环。
2. 以2020年（鼠年）作为基准年份，其他年份通过与基准年份的差值计算生肖索引。
3. 差值取模12得到索引，负数的处理通过加12转换为正数。
4. 用户输入年份后，点击按钮触发计算，结果显示对应的生肖。

注意事项

• 输入验证确保用户输入的是有效数字。
• 基准年份可根据需要调整，确保与生肖顺序对应即可。
• 该方法适用于公历年份，若需农历年份需额外转换。