vue中input不输入有提示如何实现列子
时间: 2024-02-25 10:53:10 浏览: 58
这是一个使用 `v-if` 的例子,它会在输入框中没有输入内容时显示提示信息。
```html
<template>
<div>
<label>请输入姓名:</label>
<input type="text" v-model="name" />
<p v-if="!name" style="color: red;">请填写姓名!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>
```
在上面的代码中,我们使用了 `v-if` 指令来判断输入框中是否有内容,如果没有,则显示提示信息。
需要注意的是,`v-if` 指令会根据条件来销毁或创建元素,因此当输入框中的内容发生变化时,提示信息的显示和隐藏也会相应地改变。如果你希望提示信息只在输入框失去焦点后才显示,可以使用 `v-on:blur` 事件来实现。例如:
```html
<template>
<div>
<label>请输入姓名:</label>
<input type="text" v-model="name" v-on:blur="showTip" />
<p v-if="!name" v-show="showTipFlag" style="color: red;">请填写姓名!</p>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
showTipFlag: false
}
},
methods: {
showTip() {
this.showTipFlag = true
}
}
}
</script>
```
在上面的代码中,我们使用了 `v-on:blur` 事件来触发 `showTip` 方法,该方法将 `showTipFlag` 设置为 true,从而显示提示信息。同时,我们使用了 `v-show` 指令来控制提示信息的显示和隐藏。这样,当输入框失去焦点后,才会显示提示信息。
阅读全文