用v-for 遍历 el-time-select
时间: 2024-01-01 16:05:32 浏览: 71
解决vue v-for 遍历循环时key值报错的问题
你可以使用 `v-for` 指令来遍历一个数组,然后使用 `el-time-select` 组件来显示每个数组元素。下面是一个简单的例子:
```
<template>
<div>
<el-time-select
v-for="time in times"
:key="time"
:placeholder="time"
:picker-options="{
start: '00:00',
step: '00:15',
end: '23:45'
}"
></el-time-select>
</div>
</template>
<script>
export default {
data() {
return {
times: ['09:00', '12:00', '15:00', '18:00']
}
}
}
</script>
```
在上面的示例中,我们使用 `v-for` 指令遍历 `times` 数组,并将每个元素传递给 `el-time-select` 组件的 `placeholder` 属性。此外,我们还设置了 `picker-options` 属性,以便为每个时间选择器设置时间选项。最后,我们将所有时间选择器包装在一个 `div` 元素中。
阅读全文