uniapp input 双向绑定 清空
时间: 2023-06-23 19:51:57 浏览: 101
如果你使用的是 `v-model` 来实现 input 双向绑定,你可以在清空输入框时将绑定的变量设置为空字符串或者 null,这样输入框的值也会被清空。比如:
```html
<template>
<input v-model="text" type="text">
<button @click="clearInput">清空</button>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
clearInput() {
this.text = ''
}
}
}
</script>
```
如果你是手动控制 input 值的变化,则可以在清空输入框时直接设置 input 的值为空字符串。比如:
```html
<template>
<input ref="myInput" type="text">
<button @click="clearInput">清空</button>
</template>
<script>
export default {
methods: {
clearInput() {
this.$refs.myInput.value = ''
}
}
}
</script>
```
需要注意的是,如果你手动控制 input 值的变化,Vue 并不会自动更新组件的视图,因此你需要手动触发更新。可以在清空输入框时调用 `$forceUpdate` 方法强制更新组件的视图。但是这种做法并不推荐,因为它会影响组件的性能。
阅读全文