vue 我现在想实现一个功能 比如下拉框选的值是1。我要隐藏一个input输入框 如果下拉框选的是2。我要显示这个input输入框 通过配数据的形式怎么去做到
时间: 2023-12-14 15:39:38 浏览: 133
你可以通过在`data`中定义一个变量来存储下拉框选的值,并使用`v-model`绑定下拉框的值。然后使用`v-if`或者`v-show`来根据下拉框选的值决定是否显示输入框。
例如,假设你的下拉框的`options`数组如下:
```javascript
options: [
{ value: 1, label: '选项1' },
{ value: 2, label: '选项2' },
{ value: 3, label: '选项3' }
]
```
你可以在`data`中定义一个名为`selectedOption`的变量,用来存储下拉框选的值:
```javascript
data() {
return {
options: [
{ value: 1, label: '选项1' },
{ value: 2, label: '选项2' },
{ value: 3, label: '选项3' }
],
selectedOption: null
}
}
```
然后在下拉框中使用`v-model`绑定`selectedOption`:
```html
<select v-model="selectedOption">
<option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>
```
最后,在输入框上使用`v-if`或者`v-show`来根据`selectedOption`的值决定是否显示输入框:
```html
<input v-if="selectedOption === 2" type="text" placeholder="请输入" />
```
或者
```html
<input v-show="selectedOption === 2" type="text" placeholder="请输入" />
```
这样就可以根据下拉框选的值来显示或隐藏输入框了。
阅读全文