基于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 }}
通过以上步骤，一个可点击选择上午/下午时间段的自定义控件即可完成。 记得添加样式来美化界面。 此示例代码简洁易懂，方便理解和扩展。
以上就是如何用Vue3构建一个可点击选择上下午时间段的自定义控件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502459.html
微信扫一扫 
支付宝扫一扫 
