Vue 过滤器的使用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

  2. 在实际项目中的使用：

    1. 定义过滤器

      1. 在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
        }

    2. 注册过滤器

      在main.js中引入刚刚定义的文件，然后在初始化Vue实例之前加上注册过滤器的语句

      	Object.keys(filter).forEach(key=>{
      	  Vue.filter(key,filter[key])
      	})

    3. 使用过滤器

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

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

以上是 Vue 过滤器的使用 的全部内容， 来源链接： utcz.com/z/379240.html

回到顶部