zoukankan      html  css  js  c++  java
  • vue过滤器的使用

    很多时候我们从后台拿到的数据格式并不是我们想要的,比如时间,一般后台给的是时间戳,前端需要转化为类似YYYY-MM-NN的形式,如果不是直接渲染数据,还是能够使用moment包去转化,如果是像在表格中这种写法还比较简单,能够对数据直接操作

    {title: "更新时间", align: "center",key: "updateTime",
                              render: (h, params) => {
                                return h('div',moment.unix(params.row.Time/1000).format("YYYY-MM-DD HH:mm:ss"));
                              },
                            },

    而像需要直接渲染的可能就需要我们遍历列表去一个一个修改,比较麻烦,这时候就可以使用过滤器。

    过滤器有两种,一种是全局过滤器,可以在任何一个组件内都可以使用。另一种则是组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用。

    全局过滤器

    import Vue from 'vue';
    Vue.filter('formatTime', function (val) {
      const date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
      const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
      const hour = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      return `${year}-${month}-${day} ${hour} : ${minutes} : ${seconds}`;
    });

    局部过滤器

    export default {
        name: 'FilterDemo',
        /* 局部过滤器 */
        filters: {
          /* 格式化时间戳 */
          formatTime (val) {
            const date = new Date(val);
            const year = date.getFullYear();
            const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
            const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
            const hour = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hour} : ${minutes} : ${seconds}`;
          }
        },
        data () {
          return {
     
          }
        }
        
      }

    过滤器的使用

    <template>
      <div>{{ time | formatTime }}</div>
      <div v-bind:id="time | formatTime"></div>
    </template>
  • 相关阅读:
    错误:The columns and the margins do not fit the page width.
    jasperreport使用动态jason数据源
    DynamicReport使用XML数据源+ireport的.jxml文件作为模板
    Report bands中文版
    iReport 使用json 数据源
    bat设置java环境变量
    解决DynamicReports中含有中文pdf版本不显示
    vba实现excel二级联动多选功能
    打字游戏 C语言
    fpga 任意分频 奇偶数 分频
  • 原文地址:https://www.cnblogs.com/kingjordan/p/12026974.html
Copyright © 2011-2022 走看看