vue填空題怎麼實現

Vue的填空題實現，可以透過使用v-for和v-model指令，以及陣列來處理空白處的資料。

一個簡單的實作方式是，建立一個包含所有空白處答案的數組，然後透過v-for指令遍歷該數組，並使用v-model指令雙向綁定每個空白處的答案。當使用者填寫答案時，對應的陣列元素也會隨之更新。

以下是一個實例，展示如何使用Vue實作填空問題：

HTML範本:

<div id="app">
  <h2>请完成以下句子：</h2>
  <p>1. 我们___喝珍珠奶茶，你___喝咖啡。</p>
  <p>
    <span v-for="(ans, index) in answers" :key="index">
       <input type="text" v-model="ans">
       <span v-if="index === answers.length - 1">.</span>
       <span v-else>,</span>
    </span>
  </p>
  <button @click="checkAnswers">提交</button>
</div>

Vue實例：

var vm = new Vue({
  el: '#app',
  data: {
    answers: ['', ''],
    correctAnswers: ['我们', '你']
  },
  methods: {
    checkAnswers: function() {
      for (var i = 0; i < this.answers.length; i++) {
        if (this.answers[i] !== this.correctAnswers[i]) {
          alert('回答错误！');
          return;
        }
      }
      alert('回答正确！');
    }
  }
})

在上述實例中，我們建立了一個包含兩個空白處的填空問題。每個空白處都有一個陣列元素來儲存使用者填寫的答案。我們還創建了一個正確答案的數組，以便在檢查答案時使用。

使用v-for指令遍歷answers數組，建立對應的輸入框和標點符號，同時使用v-model指令將每個輸入框與其對應的陣列元素綁定。提交按鈕呼叫checkAnswers方法來檢查所有答案，若檢查到錯誤，則彈跳窗提示使用者回答錯誤。

總的來說，透過使用Vue的v-for和v-model指令，我們可以輕鬆地實作填空題。這種方式簡潔明了，易於維護，適用於各種形式的填空題。

以上是vue填空題怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！