当前位置：首页 > VUE

vue实现单词拼写

2026-02-11 00:06:42VUE

Vue 实现单词拼写功能

在 Vue 中实现单词拼写功能，可以通过数据绑定、事件处理和动态样式来实现。以下是几种常见的方法：

基础实现方式

数据绑定与模板渲染
使用 Vue 的 v-model 绑定输入框的值，动态显示用户输入的拼写结果。

<template>
  <div>
    <p>拼写单词: {{ targetWord }}</p>
    <input v-model="userInput" placeholder="请输入拼写" />
    <p v-if="isCorrect">拼写正确！</p>
    <p v-else>拼写错误，请重试。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      targetWord: "example",
      userInput: "",
    };
  },
  computed: {
    isCorrect() {
      return this.userInput.toLowerCase() === this.targetWord.toLowerCase();
    },
  },
};
</script>

动态样式反馈
根据拼写是否正确，动态改变输入框的样式。

<template>
  <input
    v-model="userInput"
    :class="{ 'correct-input': isCorrect, 'error-input': !isCorrect && userInput }"
  />
</template>

<style>
.correct-input {
  border: 2px solid green;
}
.error-input {
  border: 2px solid red;
}
</style>

进阶功能实现

随机单词生成
从词库中随机选择一个单词作为拼写目标。

data() {
  return {
    wordList: ["apple", "banana", "orange"],
    targetWord: "",
    userInput: "",
  };
},
methods: {
  randomizeWord() {
    const randomIndex = Math.floor(Math.random() * this.wordList.length);
    this.targetWord = this.wordList[randomIndex];
    this.userInput = "";
  },
},
mounted() {
  this.randomizeWord();
}

音效与动画反馈
使用 Vue 的过渡效果或第三方库（如 animate.css）增强交互体验。

<transition name="fade">
  <p v-if="isCorrect" class="feedback">拼写正确！</p>
</transition>

<style>
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-enter {
  opacity: 0;
}
</style>

完整组件示例

以下是一个完整的单词拼写组件示例：

<template>
  <div class="spelling-game">
    <h3>拼写单词: {{ targetWord }}</h3>
    <input
      v-model="userInput"
      @keyup.enter="checkSpelling"
      :class="inputClass"
    />
    <button @click="checkSpelling">检查</button>
    <button @click="nextWord">下一个</button>
    <p v-if="showFeedback" :class="feedbackClass">{{ feedbackMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wordList: ["vue", "javascript", "html", "css"],
      targetWord: "",
      userInput: "",
      showFeedback: false,
    };
  },
  computed: {
    isCorrect() {
      return this.userInput.toLowerCase() === this.targetWord.toLowerCase();
    },
    inputClass() {
      return {
        correct: this.showFeedback && this.isCorrect,
        error: this.showFeedback && !this.isCorrect,
      };
    },
    feedbackClass() {
      return this.isCorrect ? "correct" : "error";
    },
    feedbackMessage() {
      return this.isCorrect ? "正确！" : "错误，请重试。";
    },
  },
  methods: {
    checkSpelling() {
      this.showFeedback = true;
    },
    nextWord() {
      const remainingWords = this.wordList.filter(
        (word) => word !== this.targetWord
      );
      const randomIndex = Math.floor(Math.random() * remainingWords.length);
      this.targetWord = remainingWords[randomIndex];
      this.userInput = "";
      this.showFeedback = false;
    },
  },
  mounted() {
    this.nextWord();
  },
};
</script>

<style>
.correct {
  color: green;
}
.error {
  color: red;
}
input.correct {
  border-color: green;
}
input.error {
  border-color: red;
}
</style>