v-for 下的 el-select
时间: 2023-10-13 08:07:26 浏览: 96
在 Vue.js 中,`v-for` 是用来循环渲染的指令,而 `el-select` 是饿了么团队开发的一款基于 Vue.js 的下拉选择框组件。
当我们需要循环渲染多个 `el-select` 组件时,可以使用 `v-for` 指令来进行循环,如下所示:
```html
<template>
<div>
<el-select v-for="(option, index) in options" :key="index" v-model="selectedOption">
<el-option :value="option.value" :label="option.label"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
],
selectedOption: ''
};
}
};
</script>
```
在上面的代码中,我们通过 `v-for` 循环渲染了多个 `el-select` 组件,每个组件都有自己的选项。同时,我们使用了 `v-model` 指令来绑定当前选中的选项,将其保存在 `selectedOption` 变量中。
阅读全文