vue两个绑定不同内容的输入框,清空一个输入框,另一个也跟着清空
时间: 2024-06-08 21:06:05 浏览: 232
可以使用 `v-model` 指令和一个 computed 属性来实现这个功能。
假设你有两个输入框,分别是 `input1` 和 `input2`,它们都绑定到了一个名为 `text` 的变量上。你需要在 `computed` 属性中定义一个新的变量 `textCopy`,它的值与 `text` 相同。然后,当你清空 `input1` 中的内容时,只需要将 `text` 变量清空即可,因为 `input2` 中的内容是绑定到 `textCopy` 上的,所以它也会跟着清空。
示例代码如下:
```
<template>
<div>
<input v-model="text" type="text" id="input1">
<input v-model="textCopy" type="text" id="input2">
</div>
</template>
<script>
export default {
data() {
return {
text: '',
textCopy: ''
}
},
computed: {
// 定义一个新的变量 textCopy,它的值与 text 相同
textCopy: {
get() {
return this.text
},
set(value) {
this.text = value
}
}
},
methods: {
clearInput() {
// 清空 input1 中的内容,input2 会自动跟着清空
this.text = ''
}
}
}
</script>
```
上面的代码中,当你在 `input1` 中输入内容时,它会自动同步到 `text` 中,然后 `computed` 属性中的 `textCopy` 又会同步到 `input2` 中。当你清空 `input1` 中的内容时,只需要清空 `text` 变量即可。由于 `textCopy` 是与 `text` 绑定的,所以它也会跟着清空,从而实现了你想要的功能。
阅读全文