van-form动态生成选择feild
时间: 2023-07-05 15:15:55 浏览: 180
The Principle of Feild Orientation
可以使用 `v-for` 指令循环生成选择项,同时使用 `v-bind` 指令绑定选择项的值。例如:
```html
<template>
<div>
<label>{{ label }}</label>
<select v-model="selectedValue">
<option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}</option>
</select>
</div>
</template>
<script>
export default {
props: {
label: String,
options: Array,
value: String
},
data() {
return {
selectedValue: this.value
}
},
watch: {
selectedValue(newValue) {
this.$emit('input', newValue)
}
}
}
</script>
```
在上述代码中,我们使用 `v-for` 循环生成了选择项,并使用 `v-bind` 绑定了选项的值。`v-model` 用于指定选择器的值,并使用 `watch` 监听 `selectedValue` 值的变化,当值发生变化时,通过 `$emit` 方法发送一个名为 `"input"` 的事件,将新值传递给父组件。
阅读全文