亂數產生數學加法題目

上週我們學會了使用按鈕，這星期我們來想想，怎麼利用Vue產生簡單的一個數學四則運算練習? 寫一個數學四則運算有幾個步驟: 產生題目、接受答案、檢查答案。產生題目的部分，我們先產生加法題目，再來思考如果進行四則運算。首先，我們來想想看怎麼利用亂數產生一個簡單的加法題，還記得在第一個Vue程式提到如何產生亂數吧? 想想怎麼產生兩個亂數變數來當作題目，我們就以Click.vue為基礎，先寫個Add.vue，把increment()改成generationQuestion()，請記得，檔案名稱、元件名稱、函數名稱都與功能無關，但是，好的命名會讓我們或讀我們程式的人容易理解。

function generateQuestion() {
    state.firstNum = Math.floor(Math.random() * 10);
    state.secondNum = Math.floor(Math.random() * 10);;
}

另外，由於產生亂數整數寫了很多次，我們就把邏輯獨立成一個函數，利用return回傳所產生的值。

function generateQuestion() {
    state.firstNum = **random()**;
    state.secondNum = **random()**;
}
**function random() {
  return Math.floor(Math.random() * 10);
}**

Add.vue:

<script setup lang="ts">
import { reactive } from "vue";
const state = reactive({
  firstNum: random(),
  secondNum: random(),
});
function generateQuestion() {
    state.firstNum = random();
    state.secondNum = random();
}
function random() {
  return Math.floor(Math.random() * 10);
}
</script>
<template>
  {{ state.firstNum }} + {{ state.secondNum }} =
  <button @click="generateQuestion">點一下</button>
</template>

App.vue把Add.vue加進去:

<script setup lang="ts">
import Add from "./components/Add.vue";
</script>

<template>
  <div>
    **<Add />**
  </div>
</template>

Input

那要怎麼讓使用者輸入答案呢? 首先，加上HTML的input元件:

<input type="text" />

完整程式:

<script setup lang="ts">
import { reactive } from "vue";
const state = reactive({
  firstNum: random(),
  secondNum: random(),
});
function generateQuestion() {
  state.firstNum = random();
  state.secondNum = random();
}
function random() {
  return Math.floor(Math.random() * 10);
}
</script>
<template>
  {{ state.firstNum }} + {{ state.secondNum }} =
  **<input type="text" />**
  <button @click="generateQuestion">點一下</button>
</template>

綁定

那我們怎麼知道使用者輸入的答案呢? 在Vue裡，可以利用v-model去將一個輸入框綁定一個變數，

<input type="text" **v-model="answer"** />