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

위의 예에서는 채우기-인- 두 개의 공백이 포함된 the-blank 질문입니다. 각 빈칸에는 사용자가 채운 답변을 저장하는 배열 요소가 있습니다. 또한 답변을 확인할 때 사용할 정답 배열을 만듭니다.

v-for 명령어를 사용하여 답변 배열을 순회하고, 해당 입력 상자와 문장 부호를 만들고, v-model 명령어를 사용하여 각 입력 상자를 해당 배열 요소에 바인딩합니다. 제출 버튼은 checkAnswers 메소드를 호출하여 모든 답변을 확인합니다. 오류가 감지되면 팝업 창에 사용자에게 질문에 잘못 답변하라는 메시지가 표시됩니다.

일반적으로 Vue의 v-for 및 v-model 지시문을 사용하면 빈칸 채우기 질문을 쉽게 구현할 수 있습니다. 이 방법은 간결하고 명확하며 유지 관리가 쉽고 다양한 형태의 빈칸 채우기 질문에 적합합니다.

위 내용은 Vue 빈칸 채우기 질문을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!