代码
<script setup>
import { ref, watch } from "vue";
const question = ref('')
const answer = ref('问题通常都包含一个问号')
const loading = ref(false)
watch(question, (newQuestion) => {
if (newQuestion.includes('?' && '?')) {
loading.value = true
answer.value = '思考中'
setTimeout(() => {
answer.value = Math.random() > 0.5 ? '是' : '否'
loading.value = false
}, 300)
}
})
</script>
<template>
<p>
问我一个是或否的问题:
<input v-model="question" :disabled="loading">
</p>
<p>{{ answer }}</p>
</template>
效果图
笔记
①关于watch
格式
watch(监听的内容,(newVal,oldVal)=>{})
②关于 :disabled
在 Vue.js 的模板语法中,:disabled
是一个绑定指令,用于动态地绑定 HTML 元素的 disabled
属性。这通常用于表单元素,如 <input>
、<button>
等,以控制它们是否可以被用户交互。
:disabled="false"
的意思是将 disabled
属性的值绑定到 Vue 实例的某个数据属性或计算属性上,并且这个值被设置为 false
。如果数据属性或计算属性的值是 false
,那么该元素不会被禁用,用户可以与其交互。如果值是 true
,那么该元素会被禁用,用户不能与其交互