组件结构
以下是组件的基本结构:
<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>