Comment implémenter les questions à remplir dans Vue-Questions et réponses frontales-php.cn

Comment implémenter les questions à remplir dans Vue

WBOY

Libérer： 2023-05-18 10:06:08

original

1218 Les gens l'ont consulté

L'implémentation par Vue des questions à remplir peut traiter les données contenues dans les blancs en utilisant les instructions v-for et v-model, ainsi que des tableaux.

Un moyen simple de l'implémenter est de créer un tableau contenant toutes les réponses dans les espaces, puis de parcourir le tableau via la directive v-for et d'utiliser la directive v-model pour effectuer une liaison bidirectionnelle les réponses dans chaque espace. Au fur et à mesure que l'utilisateur remplit ses réponses, les éléments du tableau correspondants sont mis à jour.

Ce qui suit est un exemple montrant comment utiliser Vue pour implémenter des questions à remplir :

Modèle 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>

Copier après la connexion

Vue exemple :

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

Copier après la connexion

# 🎜🎜#Dans l'exemple ci-dessus, nous avons créé une question à remplir avec deux espaces vides. Chaque espace comporte un élément de tableau pour stocker les réponses renseignées par l'utilisateur. Nous créons également un tableau de réponses correctes à utiliser lors de la vérification des réponses.

Utilisez l'instruction v-for pour parcourir le tableau de réponses, créez les zones de saisie et les signes de ponctuation correspondants, et utilisez l'instruction v-model pour lier chaque zone de saisie à son élément de tableau correspondant. Le bouton Soumettre appelle la méthode checkAnswers pour vérifier toutes les réponses. Si une erreur est détectée, une fenêtre contextuelle invitera l'utilisateur à répondre incorrectement à la question.

En général, en utilisant les directives v-for et v-model de Vue, nous pouvons facilement implémenter des questions à remplir. Cette méthode est concise, claire, facile à maintenir et adaptée à diverses formes de questions à remplir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!