当前位置：首页 > VUE

vue实现单词拼写

2026-03-28 10:08:20VUE

Vue 实现单词拼写功能

实现单词拼写功能通常需要结合 Vue 的数据绑定、事件处理和动态渲染能力。以下是一个简单的实现方案：

数据准备

定义一个包含单词和提示的数组，每个单词对象包含拼写、释义和提示信息。

data() {
  return {
    words: [
      { spelling: 'apple', meaning: '苹果', hint: '一种常见的水果' },
      { spelling: 'banana', meaning: '香蕉', hint: '黄色的弯曲水果' }
    ],
    currentWordIndex: 0,
    userInput: '',
    showHint: false,
    feedback: ''
  }
}

模板结构

创建拼写区域、输入框和反馈区域。

<div class="spelling-game">
  <div class="word-meaning">{{ currentWord.meaning }}</div>
  <button @click="toggleHint">显示提示</button>
  <div v-if="showHint" class="hint">{{ currentWord.hint }}</div>

  <input 
    v-model="userInput" 
    @keyup.enter="checkSpelling"
    placeholder="请输入单词拼写">

  <div class="feedback" :class="{ correct: isCorrect, incorrect: !isCorrect && feedback }">
    {{ feedback }}
  </div>
</div>

核心方法

实现单词检查、提示切换和反馈逻辑。

computed: {
  currentWord() {
    return this.words[this.currentWordIndex]
  },
  isCorrect() {
    return this.feedback.includes('正确')
  }
},
methods: {
  checkSpelling() {
    if (this.userInput.toLowerCase() === this.currentWord.spelling) {
      this.feedback = '拼写正确！'
      setTimeout(() => {
        this.nextWord()
      }, 1000)
    } else {
      this.feedback = '拼写错误，请再试一次'
    }
  },
  toggleHint() {
    this.showHint = !this.showHint
  },
  nextWord() {
    this.userInput = ''
    this.showHint = false
    this.feedback = ''
    this.currentWordIndex = (this.currentWordIndex + 1) % this.words.length
  }
}

样式增强

添加基础样式提升用户体验。

vue实现单词拼写

.spelling-game {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.word-meaning {
  font-size: 24px;
  margin-bottom: 20px;
}

.hint {
  color: #666;
  margin: 10px 0;
}

input {
  padding: 8px;
  width: 100%;
  margin: 10px 0;
}

.feedback {
  margin-top: 10px;
  min-height: 20px;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
}