本文介绍如何在 Vue 应用中，根据用户上传的视频实际时长，动态更新 的 max 属性值，避免直接操作 DOM，遵循 Vue 响应式最佳实践。
本文介绍如何在 vue 应用中，根据用户上传的视频实际时长，动态更新 `` 的 `max` 属性值，避免直接操作 dom，遵循 vue 响应式最佳实践。
在 Vue 开发中，若需根据上传视频自动设定时间选择器（<input type="time">）的最大可选时间，切忌使用原生 DOM 查询与手动 setAttribute() 修改属性——这不仅破坏 Vue 的响应式机制，还易导致视图不更新、逻辑难以维护。正确做法是：将 max 值绑定为响应式数据，并通过事件驱动更新该数据。
✅ 正确实现步骤
移除
v-model于type="file"输入框<input type="file">不支持双向绑定，v-model在此无效且可能掩盖错误（如你代码中的:v-model=实为语法错误）。应仅依赖@input事件获取文件。使用模板 ref 替代
document.getElementById
通过ref="videoEl"获取<video></video>元素，配合@loadedmetadata钩子读取真实时长，无需document.createElement或URL.createObjectURL手动管理。响应式绑定
:max属性
将时间输入框的max绑定到 data 中的maxTime字段，Vue 会自动同步 DOM 属性变更。格式化秒数为标准
HH:MM:SSvideo.duration返回浮点秒数（如123.45），需转换为带前导零的00:02:03格式，否则type="time"将解析失败或显示异常。
