基于Vue3构建自定义时间段选择器
本文演示如何使用Vue3构建一个自定义的时间段选择控件，实现点击选择上午或下午特定时间的功能。 我们将利用Vue3的响应式系统和组件化特性来完成此任务。
首先，创建一个响应式数据数组timeList，存储每个时间段及其对应的上午/下午选择状态：
const timeList = reactive([
{
time: '08:00',
options: [
{ name: '上午', selected: false },
{ name: '下午', selected: false },
],
},
// ... 添加更多时间段
]);
接下来，定义一个selectTime函数处理点击事件，更新选择状态：
立即学习“前端免费学习笔记（深入）”；
function selectTime(time, option) {
// 清除所有已选状态
timeList.forEach(item => item.options.forEach(opt => opt.selected = false));
// 更新选中状态
timeList.forEach(item => {
if (item.time === time) {
item.options.forEach(opt => {
if (opt.name === option) opt.selected = !opt.selected;
});
}
});
}
最后，在模板中使用v-for指令遍历timeList，并绑定点击事件：
{{ item.time }}{{ option.name }}
通过以上步骤，一个可点击选择上午/下午时间段的自定义控件即可完成。 记得添加样式来美化界面。 此示例代码简洁易懂，方便理解和扩展。
