计算属性适合将原始秒数转为“时:分:秒”易读格式，自动响应数据变化且仅依赖更新时重算，比methods更高效；示例中通过formattedDuration计算属性对totalSeconds做取整、拆解、补零处理，并支持HHMMSS/MMSS多格式及video.duration动态获取。
用计算属性处理视频总时长
假设你已通过 video.duration 或后端接口获取到总时长（单位：秒），比如 totalSeconds: 3665，你想显示为 1:01:05。直接在模板里写逻辑会冗长，也难复用；用计算属性封装转换逻辑最自然。
基础格式化写法
在组件 data 中存原始秒数，再定义一个计算属性做转换：
- 先判断是否为有效数字（避免 NaN 或负值）
- 取整秒数，再分别算出小时、分钟、剩余秒数
- 用
String.prototype.padStart(2, '0')补零，保证两位显示
示例代码：
computed: {
formattedDuration() {
const sec = Math.floor(this.totalSeconds || 0);
if (sec < 0) return '00:00:00';
const hours = Math.floor(sec / 3600);
const minutes = Math.floor((sec % 3600) / 60);
const seconds = sec % 60;
if (hours > 0) {
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
}
支持多种格式的灵活写法
如果项目中需同时支持「分:秒」和「时:分:秒」两种风格，可加参数控制，或拆成多个计算属性：
立即学习“前端免费学习笔记（深入）”；
-
durationMMSS：仅显示分秒，如 12:05 -
durationHHMMSS：完整格式，如 1:12:05 - 也可用传参方式（配合函数式计算属性，Vue 3 支持，Vue 2 需借助方法模拟）
结合 video 元素动态获取总时长
注意：video.duration 初始为 NaN，需等元数据加载完成（loadedmetadata 事件）才可用。可在 mounted 中监听，或用计算属性加保护逻辑：
computed: {
totalSeconds() {
const el = this.$refs.videoEl;
return el && !isNaN(el.duration) ? el.duration : 0;
},
formattedDuration() {
return this.formatTime(this.totalSeconds);
}
},
methods: {
formatTime(sec) {
const s = Math.floor(sec);
const m = Math.floor(s / 60);
const h = Math.floor(m / 60);
const remainingSec = s % 60;
const remainingMin = m % 60;
return h > 0
? `${h}:${remainingMin.toString().padStart(2, '0')}:${remainingSec.toString().padStart(2, '0')}`
: `${remainingMin}:${remainingSec.toString().padStart(2, '0')}`;
}
}
模板中直接使用
无需额外调用，直接绑定即可：
<p>视频总时长：{{ formattedDuration }}</p>
当 totalSeconds 变化（例如切换不同视频），formattedDuration 自动更新，且不会重复执行格式化逻辑。
