写出vue输入框的重置功能代码,点击重置按钮消除输入内容
时间: 2024-03-08 21:46:42 浏览: 207
删除输入框的文字
5星 · 资源好评率100%
可以通过在组件中添加一个按钮,然后在点击按钮时将输入框的值设为空来实现重置功能。代码示例如下:
```html
<template>
<div>
<input type="text" v-model="inputValue">
<button @click="reset">重置</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
reset() {
this.inputValue = ''
}
}
}
</script>
```
在这个示例代码中,我们在组件中定义了一个 `inputValue` 变量来保存输入框的值,然后在按钮的点击事件处理函数中将其设为空。这样,当用户点击重置按钮时,输入框中的内容就会被清空。
阅读全文