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

Bertha 。 2024-02-05 21:44 19阅读 0赞

#### 组件结构 ####

以下是组件的基本结构：

<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>