用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>实现说明
- 生肖顺序固定为鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪，12年一个循环。
- 以2020年（鼠年）作为基准年份，其他年份通过与基准年份的差值计算生肖索引。
- 差值取模12得到索引，负数的处理通过加12转换为正数。
- 用户输入年份后，点击按钮触发计算，结果显示对应的生肖。
注意事项
- 输入验证确保用户输入的是有效数字。
- 基准年份可根据需要调整，确保与生肖顺序对应即可。
- 该方法适用于公历年份，若需农历年份需额外转换。
