Vue 过滤器的使用

Vue官方文档是这样说的：Vue过滤器用于格式化一些常见的文本。

在实际项目中的使用：

定义过滤器

在src定义一个filter.js文件，里面定义过滤器函数，在最后要使用 exprot default 将定义的函数暴露出来

//将时间戳转化为日期格式

function formatDate (value, fmt='') {

let date = new Date(value)

if (fmt=='') fmt = 'Y-MM-dd hh:mm'

let o = {

    'Y+':date.getFullYear(),

    'M+': date.getMonth() + 1,

    'd+': date.getDate(),

    'h+': date.getHours(),

    'm+': date.getMinutes(),

    's+': date.getSeconds()

};

for (let k in o) {

    if (new RegExp(`(${k})`).test(fmt)) {

        let str = o[k] + '';

        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));

    }

}

    return fmt;

};

function padLeftZero (str) {

    return ('00' + str).substr(str.length);

};

//将数字格式化为容易查看的格式

function formatNumber(num){

     if (num>= 1000000) {

     return (num/1000000).toFixed(1).replace(/.0$/, '') + 'w';

     }

     if (num>= 1000) {

     return (num/1000).toFixed(1).replace(/.0$/, '') + 'k';

     }

   return num;

}

//暴露函数

export default {

  formatDate,

  formatNumber

}

注册过滤器

在main.js中引入刚刚定义的文件，然后在初始化Vue实例之前加上注册过滤器的语句
```
	Object.keys(filter).forEach(key=>{

	  Vue.filter(key,filter[key])

	})
```
使用过滤器

使用的时候只需要在{{}} 中想要格式化的变量后面加上 | ，然后跟上自己定义的过滤器函数的名称，比如：fun_test 即可，该函数默认会接受一个参数，及 | 前的那个值，如果还需要往该函数中传入其他参数，可以这样 | fun_test(param1,param2,...)

注：本文根据个人经验所写，如需转载请注明出处：https://www.cnblogs.com/zhuchenglin/p/9832361.html

巴特西

Vue 过滤器的使用

最新文章

热门文章