Bagaimana untuk melaksanakan Vue mengisi soalan kosong

Pelaksanaan Vue untuk mengisi soalan kosong boleh memproses data di tempat kosong dengan menggunakan arahan v-for dan v-model, serta tatasusunan.

Pelaksanaan mudah adalah untuk mencipta tatasusunan yang mengandungi semua jawapan di tempat kosong, kemudian lelaran melalui tatasusunan dengan arahan v-untuk, dan gunakan arahan model-v untuk mengikat dua hala jawapan dalam setiap kosong. Apabila pengguna mengisi jawapan mereka, elemen tatasusunan yang sepadan dikemas kini.

Berikut ialah contoh yang menunjukkan cara menggunakan Vue untuk melaksanakan soalan isian kosong:

Templat 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>

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

Dalam contoh di atas, Kami mencipta soalan isikan-kosong dengan dua ruang kosong. Setiap kosong mempunyai elemen tatasusunan untuk menyimpan jawapan yang diisi oleh pengguna. Kami juga mencipta pelbagai jawapan yang betul untuk digunakan semasa menyemak jawapan.

Gunakan arahan v-for untuk melintasi tatasusunan jawapan, buat kotak input dan tanda baca yang sepadan, dan gunakan arahan model-v untuk mengikat setiap kotak input kepada elemen tatasusunan yang sepadan. Butang hantar memanggil kaedah checkAnswers untuk menyemak semua jawapan Jika ralat dikesan, tetingkap timbul akan menggesa pengguna untuk menjawab soalan dengan salah.

Secara amnya, dengan menggunakan arahan v-for dan v-model Vue, kami boleh melaksanakan soalan isian kosong dengan mudah. Kaedah ini ringkas, jelas, mudah diselenggara, dan sesuai untuk pelbagai bentuk soalan isian kosong.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan Vue mengisi soalan kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!