vuejs绑定数据到select中,选择option数据后,同步下面一个输入框中的select也同步改变对应?怎么搞呢
时间: 2024-03-02 17:52:45 浏览: 14
可以使用`v-model`指令来实现这个需求。首先,将要绑定的数据绑定到`select`标签上,然后在下面的输入框中使用`v-model`指令将其绑定到同一个数据上。
示例代码如下:
```
<template>
<div>
<select v-model="selectedOption">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<input type="text" v-model="selectedOption">
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', text: 'Option 1' },
{ value: 'option2', text: 'Option 2' },
{ value: 'option3', text: 'Option 3' },
],
selectedOption: '',
};
},
};
</script>
```
在上面的代码中,`selectedOption`既绑定到了`select`标签上,也绑定到了下面的输入框中。当用户在`select`中选择了一个选项后,下面的输入框中的值也会同步更新为所选选项的值。