Vue.js 中使用 Watch 选项实现动态问题判断与展示答案

2024-01-07 21:36:23

组件结构

以下是组件的基本结构:

<template>
  <div>
    <!-- 输入框,用于输入问题 -->
    <p>
      提出一个是/否问题:
      <input v-model="question" :disabled="loading" />
    </p>
    <!-- 显示答案 -->
    <p>{{ answer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',    // 问题
      answer: '通常问题应该包含一个问号。 ',   // 默认答案
      loading: false   // 加载状态
    }
  },
  watch: {
    // 监听 'question' 属性的变化
    question(newQuestion) {
      this.loading = true;    // 开始加载

      // 判断问题结尾是否包含问号
      if (newQuestion.endsWith('?')) {
        this.answer = '是/否问题,好问题!';
      } else {
        this.answer = '通常问题应该包含一个问号。';
      }

      this.loading = false;   // 加载结束
    }
  }
}
</script>

功能说明

  1. 输入框用于用户输入问题,使用v-model指令绑定question属性。
  2. watch选项监听question属性的变化,一旦问题发生变化,触发回调函数。
  3. 在回调函数中,首先设置加载状态,然后通过endsWith('?')方法判断问题是否以问号结尾。
  4. 根据判断结果更新answer的值,展示相应的答案。
  5. 最后,结束加载状态,保证用户体验。

使用方法

在Vue.js应用中,可以简单地将该组件引入,并在需要的地方使用。用户通过输入问题,即可即时获得动态判断的答案。

<template>
  <div>
    <DynamicQuestionComponent />
  </div>
</template>

<script>
import DynamicQuestionComponent from './DynamicQuestionComponent.vue';

export default {
  components: {
    DynamicQuestionComponent,
  },
}
</script>

文章来源:https://blog.csdn.net/qq_43116031/article/details/135373970
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。