vue 我现在想实现一个表单功能功能 表单是通过配数据的形式展示出来的。但是比如下拉框选的值是1。我要隐藏一个input输入框 如果下拉框选的是2。我要显示这个input输入框 通过配数据的形式怎么去做到
时间: 2023-12-14 18:39:40 浏览: 28
你可以在数据中为下拉框选项添加一个 `showInput` 的属性,然后在模板中根据这个属性值来决定是否显示输入框。
示例代码:
```html
<template>
<form>
<div v-for="field in formFields" :key="field.name">
<label :for="field.name">{{ field.label }}</label>
<div v-if="field.type === 'select'">
<select :name="field.name" v-model="formData[field.name]">
<option v-for="option in field.options" :value="option.value">{{ option.label }}</option>
</select>
<input v-if="formData[field.name] === '2'" type="text" :name="field.name + '_input'" v-model="formData[field.name + '_input']">
</div>
</div>
</form>
</template>
<script>
export default {
data() {
return {
formFields: [
{
name: 'selectField',
label: 'Select Field',
type: 'select',
options: [
{ label: 'Option 1', value: '1', showInput: false },
{ label: 'Option 2', value: '2', showInput: true },
{ label: 'Option 3', value: '3', showInput: false }
]
}
],
formData: {}
}
}
}
</script>
```
上面的代码中,根据 `formFields` 数组中的数据动态生成表单字段,当字段类型为 `select` 时,根据当前选中的值来决定是否显示输入框。如果选中的值是 `2`,则显示输入框,否则隐藏输入框。