vue中,判断input输入框中输入的内容不为空
在 Vue 中,你可以使用 v-model
指令将 input 元素的值绑定到一个变量,然后你可以检查这个变量的值是否为空。以下是一个示例:
<template>
<input type="text" v-model="inputValue">
<button :disabled="!inputValue">Submit</button>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
}
}
</script>
在这个示例中,我们将 inputValue
绑定到了 input 元素的 value 属性,因此当用户输入时,inputValue
会自动更新。
接下来,我们用 !inputValue
判断输入是否为空。如果 inputValue
是空字符串(也就是用户没有输入或者只输入了空格),那么 !inputValue
的值为 true
,按钮将被禁用(因为我们用 :disabled
绑定了它)。否则,!inputValue
的值为 false
,按钮将被启用。
注意,这个判断对于只输入空格的情况并不有效,如果你想也把这种情况看作为空输入,你应该使用 inputValue.trim()
替代 inputValue
。