Take you to master Vue filters and timestamp conversion

Abstract: Vue's filters filter is a relatively common knowledge point. Below I will combine the example of timestamp conversion to quickly understand the usage of filters.

This article is shared from Huawei Cloud Community " Mastering Vue Filters and Timestamp Conversion ", author: Northern Lights Night. .

1. Quick recognition concept:

Hello everyone, Vue's filters filter is a relatively common knowledge point. Below I will combine the example of timestamp conversion to quickly understand the usage of filters~

According to the official life, Vue.js allows you to customize filters, which can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported from 2.1.0+). The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol.

Simply put, it is to define a processing function in the filters filter, write the function name after the pipe character "|", it will process the custom data before the pipe character "|", and the custom data will automatically become the filter The parameters of the function.

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Filters can be mainly divided into local filters and global filters, see the detailed introduction below.

2. Partial filter:

1. A local filter is a local filter defined in the options of a component, and only the component can be used. In our general development, for the time backend, only a timestamp is usually returned for the front end to process by itself. For example, define a filter that converts the timestamp to the date format (note the steps):

<template>
  <div>
    <!-- 4. 渲染数据，设置过滤器 -->
    {{ times | conversion }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
  // 2. 定义过滤器
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
  },
};
</script>

As a result, the conversion was successful:

2. Not only that, filters can also be connected in series, which means that multiple filters can be defined. For example, the following is equivalent to first using the conversion function to process the times data to get the result, and then continue to use the againChange function to process the previous results to get the final result:

{{ times | conversion | againChange }}
The basic demonstration is as follows:

<template>
  <div>
    <!-- 5. 放过滤器 -->
    {{ times | conversion | againChange }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
  // 2. 定义过滤器
  filters: {
    //3.定义一个处理函数，参数value为要处理数据
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    },
    //4.再定义一个过滤器，给数据前加上"时间为："这几个字
    againChange: function (value) {
      return "时间为：" + value;
    },
  },

};
</script>

3. At the same time, the filter can also receive parameters. For example, we improve the example of the first point, convert the timestamp to a time format that can specify a format, and use the desired time format as the filter parameter. The specific usage is as follows (note the steps) :

<template>
  <div>
    <!-- 4. 放过滤器,同时传参数，返回指定格式的时间 -->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
  // 2. 定义过滤器
  filters: {
    //3.定义一个处理函数，参数value为要处理数据,format为传入参数
    conversion: function (value, format) {
      //这个转换方法就不介绍了，看看就行，过滤器用法为主
      var date = new Date(value);
      function addZero(date) {
        if (date < 10) {
          return "0" + date;
        }
        return date;
      }
      let getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(date.getDate()),
        d: date.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (function () {
          let a = ["日", "一", "二", "三", "四", "五", "六"];
          return a[date.getDay()];
        })(),
      };
      for (let i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      return format;
    },
  },

};
</script>

The results are as follows:

Three. Global filter:

Since it is called global, it is natural to define the filter globally before creating the Vue instance, and all components can be used directly after configuration. Generally defined in a custom file. For example, the above filter for processing timestamps is used as follows:

1. Define the filters folder in the src directory, and define a filters.js file in the folder:

2. The filters.js file code is as follows:

const conversion = function (value, format) {
      var date = new Date(value);
      function addZero(date) {
        if (date < 10) {
          return "0" + date;
        }
        return date;
      }
      let getTime = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear() % 100,
        MM: addZero(date.getMonth() + 1),
        M: date.getMonth() + 1,
        dd: addZero(date.getDate()),
        d: date.getDate(),
        HH: addZero(date.getHours()),
        H: date.getHours(),
        hh: addZero(date.getHours() % 12),
        h: date.getHours() % 12,
        mm: addZero(date.getMinutes()),
        m: date.getMinutes(),
        ss: addZero(date.getSeconds()),
        s: date.getSeconds(),
        w: (function () {
          let a = ["日", "一", "二", "三", "四", "五", "六"];
          return a[date.getDay()];
        })(),
      };
      for (let i in getTime) {
        format = format.replace(i, getTime[i]);
      }
      return format;
    }
  export {
    conversion //通过此处导出方法
} 

3. Introduce a global filter in main.js:

Setting the global filter format is Vue.filter('filter name', corresponding processing function);

import {conversion} from './filters/filters.js'
Vue.filter('conversion', conversion);

4. It can be used directly in a certain component:

<template>
  <div>
    <!-- 2. 放过滤器,同时传参，为指定格式时间 -->
    {{ times | conversion("yyyy-MM-dd HH:mm:ss 星期w") }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.模拟一个时间戳数据
      times: 1616959086000,
    };
  },
};
</script>

The same result:

4. Expansion:

It can be found that the usage of filters is a bit similar to computed properties, so what is the difference between them?

1. Filters can pass parameters, but cannot access this. Does not have the cache function. At the same time, filters can be connected in series. It can be set locally and globally. The filter is relatively simple, it is only triggered when it is explicitly called, and is generally applied to template rendering.
2. Computed cannot pass parameters, but can access this, which is aimed at the operation of variables. The processing logic behind it is more complex, with caching capabilities, and more universal in components, so it is suitable for complex data conversion, statistics and other scenarios.

5. Summary:

The above is the general content of the filters filter. In general, filters can be divided into local filters and global filters. The local filter is effective inside the component, and the global filter is effective in each component. Among them, you can set multiple filters and pass parameters to the filters. Generally, filters are applied to some simple data rendering.

Click to follow and learn about Huawei Cloud's fresh technology for the first time~