html页面使用vue组件的函数,vue中不能直接在html中使用import的js方法问题(个人笔记)...

utils/util.js

// 格式化时间

const timeLength = (value) => {

if (!value) return ''

let result = parseInt(value)

let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);

let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));

let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));

let res = '';

if (h !== '00') res += `${h}:`;

res += `${m}:${s}`;

return res;

}

module.exports = {

timeLength

}

index.vue

(视频时长：{{timeLength(time_length)}})

import { timeLength } from '../../../utils/util';

以上用法会出现报错：Property or method "timeLength" is not defined

原因：

虽然vue组件中HTML，css，js可以在同一个页面书写，但是js里面的函数、变量是需要使用export default{ }抛出之后html才能使用的。

解决方法：

需要在methods里面再声明一下这个方法

methods: {

timeLength, // import进来需要重新声明一下才能在html中使用

}

重新定义一个方法，在这个方法里面使用它

(视频时长：{{formatTime(time_length)}})

formatTime(val){

return timeLength(val)

},