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('回答正确！');
    }
  }
})

上の例では、空白が 2 つある穴埋め問題を作成しました。各空白には、ユーザーが入力した回答を保存するための配列要素があります。また、答えを確認するときに使用する正解の配列も作成します。

v-for 命令を使用して回答配列を走査し、対応する入力ボックスと句読点を作成し、v-model 命令を使用して各入力ボックスを対応する配列要素にバインドします。送信ボタンは checkAnswers メソッドを呼び出してすべての回答をチェックします。エラーが検出された場合は、ポップアップ ウィンドウが表示され、ユーザーは質問に間違って回答するよう求められます。

一般に、Vue の v-for および v-model ディレクティブを使用すると、穴埋め問題を簡単に実装できます。この方法は簡潔かつ明確で保守が容易で、さまざまな形式の穴埋め問題に適しています。

以上がVue の穴埋め問題を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。