基于vue3实现梅花易数（一）取卦、取爻

作者有话说：最近在学习梅花易数，觉得梅花易数的取卦、取爻很适合用代码来写，所以这个专栏将用来实现梅花易数，看看能做到哪一步。
这里先将整个项目做一个简略的流程图。该流程图不涉及解卦，只是单纯的起卦，且没有外应。

梅花易数知识

先天八卦：乾一、兑二、离三、震四、巽五、坎六、艮七、坤八。

梅花易数中起卦方法是一数作上卦、一数作下卦、一数作动爻，上卦和下卦成一卦，动爻变卦。这三个数有很多取法，字占法、时占法等等，这篇文章不用这些方法取，而是随意取数。
取卦方法：以数除以8，余数取卦，除尽则取坤卦。如18%8=2，为兑卦。24%8=0，为坤卦。
取爻方法：以数除以6，余数取动爻，除尽则六动爻，如16%6=4，为四爻动。动爻涉及到变卦，动爻在本章没什么用，在后面的章节才起作用，这里先实现功能。

取卦、取爻功能

本章节将跳过起卦取数部分，先实现取卦、取爻功能，其他功能先不完成，以免篇幅过长。接下来就是代码实现。

取卦

首先实现先天八卦，这里直接用数组来储存。

const bagua = ["乾卦", "兑卦", "离卦", "震卦", "巽卦", "坎卦", "艮卦", "坤卦"];

其次就是取卦，先定义一个箭头函数，接受一个参数。
该参数对8取余，因为对8取余，值的范围为0-7，而我们需要的是1-8，所以我们加一个或逻辑，即当余数为0时，值为假，值会变成8。
最后根据余数取卦，但因为数组第一个值的索引为0，所以我们需要再-1。

const getgua = (shu) => bagua[(shu % 8 || 8) - 1];

取爻

接着就是取动爻，也是加一个或逻辑，使值范围变成1-6。

const getdongyao = (shu) => shu % 6 || 6;

基础部分已完成，最后就是在网页上展示功能。
首先定义三个响应式变量。
shu值为取卦用的数
gua值为取的卦
dongyao值为取的动爻

const shu = ref();
const gua = ref();
const dongyao = ref();

网页实现

网页上的内容如下，首先是一个输入框，双向绑定shu，两个按钮取卦、取爻，然后解构值显示在网页上。

最后的最后

本文只是完成了非常简单的取卦和取爻的功能，下一章将完成非常麻烦的成卦、变卦。这里简单介绍一下，八卦两两成卦可得六十四卦、而六十四卦有6爻，每个爻变化都会有不同的卦。

完整代码如下

<script setup>
import { ref } from "vue";
const shu = ref();
const gua = ref();
const dongyao = ref();
const bagua = ["乾卦", "兑卦", "离卦", "震卦", "巽卦", "坎卦", "艮卦", "坤卦"];
const getgua = (shu) => bagua[(shu % 8 || 8) - 1];
const getdongyao = (shu) => shu % 6 || 6;
</script>

<template>
	<div>
		<input v-model="shu" />
		<button @click="gua = getgua(shu)">取卦</button>
		<button @click="dongyao = getdongyao(shu)">取动爻</button>
		<p>{{ gua }}</p>
		<p>{{ dongyao }}</p>
	</div>
</template>