1、巧用methods承载计算属性的方法
如果一个数据的变化会影响一个dom的改变,那么计算属性就很好承担这个责任。但是计算属性只能return一个固定监听dom下的数值,如果传入的数据是state很多个state,且需要渲染在不同dom上,就得定义多个计算属性。比如我需要获取currentTime转化成分秒的时间戳,以及currentDuration转化时间戳,显然得定义2个计算属性。
那么通过methods定义形参,一样可以履行计算属性的功能。
<div class="progress-wrapper">
<span class="time time-l">{{format(currentTime)}}</span>
<div class="progress-bar-wrapper"></div>
<span class="time time-r">{{format(currentSong.duration)}}</span>
</div>
// 省略几大截代码
methods: {
format (interval) {
interval = interval | 0
const minute = interval / 60 | 0
const second = interval % 60
return `${minute}:${second}`
},
}
2、指定位数自动补零
_pad (num, n = 2) {
let len = num.toString().length
while (len < n) {
num = '0' + num
len++
}
return num
},