当前位置：首页 > VUE

vue实现单词拼写

2026-01-08 08:02:33VUE

Vue 实现单词拼写功能

在 Vue 中实现单词拼写功能，可以通过数据绑定、事件处理和动态样式来实现。以下是一个完整的实现方案。

数据准备

定义一个包含单词和提示信息的数组，用于拼写练习：

data() {
  return {
    words: [
      { word: 'apple', hint: '一种常见的水果' },
      { word: 'banana', hint: '黄色的弯曲水果' },
      { word: 'orange', hint: '圆形橙色水果' }
    ],
    currentWordIndex: 0,
    userInput: '',
    feedback: '',
    isCorrect: false
  }
}

模板结构

创建拼写界面，包含单词提示、输入框和反馈区域：

<template>
  <div class="spelling-game">
    <h3>拼写单词: {{ currentHint }}</h3>
    <input 
      v-model="userInput" 
      @keyup.enter="checkSpelling"
      placeholder="请输入单词..."
    />
    <button @click="checkSpelling">检查</button>
    <p :class="{ correct: isCorrect, incorrect: !isCorrect && feedback }">
      {{ feedback }}
    </p>
    <button @click="nextWord" v-if="isCorrect">下一个单词</button>
  </div>
</template>

计算属性

添加计算属性获取当前单词和提示：

computed: {
  currentWord() {
    return this.words[this.currentWordIndex].word
  },
  currentHint() {
    return this.words[this.currentWordIndex].hint
  }
}

方法实现

实现拼写检查和切换单词的功能：

methods: {
  checkSpelling() {
    if (this.userInput.toLowerCase() === this.currentWord.toLowerCase()) {
      this.feedback = '正确!'
      this.isCorrect = true
    } else {
      this.feedback = '不正确，请再试一次'
      this.isCorrect = false
    }
  },

  nextWord() {
    this.currentWordIndex = (this.currentWordIndex + 1) % this.words.length
    this.userInput = ''
    this.feedback = ''
    this.isCorrect = false
  }
}

样式设计

添加基本样式增强用户体验：

vue实现单词拼写

<style>
.spelling-game {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

input {
  padding: 8px;
  margin: 10px;
  width: 200px;
}

button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.correct {
  color: green;
  font-weight: bold;
}

.incorrect {
  color: red;
}
</style>