Vue.js watch属性 :diabled属性

 代码

<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，那么该元素会被禁用，用户不能与其交互