Vue.js 中使用 Watch 选项实现动态问题判断与展示答案
组件结构
以下是组件的基本结构：
<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>
功能说明
- 输入框用于用户输入问题，使用
v-model指令绑定question属性。 watch选项监听question属性的变化，一旦问题发生变化，触发回调函数。- 在回调函数中，首先设置加载状态，然后通过
endsWith('?')方法判断问题是否以问号结尾。 - 根据判断结果更新
answer的值，展示相应的答案。 - 最后，结束加载状态，保证用户体验。
使用方法
在Vue.js应用中，可以简单地将该组件引入，并在需要的地方使用。用户通过输入问题，即可即时获得动态判断的答案。
<template><div><DynamicQuestionComponent /></div>
</template><script>
import DynamicQuestionComponent from './DynamicQuestionComponent.vue';export default {components: {DynamicQuestionComponent,},
}
</script>