vue中如何一个方法绑定多个v-model
时间: 2023-07-04 21:03:48 浏览: 133
vue在自定义组件中使用v-model进行数据绑定的方法
在Vue中,一个方法可以通过v-model绑定到一个输入框上,如果要绑定多个v-model,可以使用Vue的计算属性和对象拓展语法。
例如,如果我们有两个输入框需要绑定到同一个方法,可以这样写:
```html
<template>
<div>
<input v-model="myValue1" />
<input v-model="myValue2" />
</div>
</template>
<script>
export default {
data() {
return {
value: 'default value'
}
},
computed: {
myValue1: {
get() {
return this.value
},
set(newValue) {
this.value = newValue
}
},
myValue2: {
get() {
return this.value
},
set(newValue) {
this.value = newValue
}
}
}
}
</script>
```
在这个例子中,我们定义了两个计算属性`myValue1`和`myValue2`,它们都依赖于`value`,当它们发生变化时,会调用`set`函数更新`value`的值。因此,当我们在两个输入框中输入内容时,它们都会更新`value`的值。
这种方法可以扩展到任意数量的输入框,只需要定义更多的计算属性来绑定它们即可。
阅读全文