基于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，并绑定点击事件：
<div class="time-selector">
<div v-for="item in timeList" :key="item.time">
<div>{{ item.time }}</div>
<div v-for="option in item.options" :key="option.name"
@click="selectTime(item.time, option.name)"
:class="{ selected: option.selected }">
{{ option.name }}
</div>
</div>
</div>通过以上步骤，一个可点击选择上午/下午时间段的自定义控件即可完成。 记得添加样式来美化界面。 此示例代码简洁易懂，方便理解和扩展。
以上就是如何用Vue3构建一个可点击选择上下午时间段的自定义控件？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
176
