Abstract: Vue filters filters are a common knowledge. I will take you through the use of filters quickly with an example of timestamp conversion.

This article is shared by Huawei Cloud community “Master Vue Filters and Timestamp Conversion in 3 Minutes” by Aurora Borealis Night.

First, quickly recognize concepts

Vue filters filters are a common knowledge. I will take a quick look at the use of filters with a timestamp conversion example

In official terms, vue.js allows you to customize filters that 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 supported as of 2.1.0+). Filters should be added to the end of JavaScript expressions, indicated by the “pipe” symbol.

Is simply define a handler in filters filter, write the name of the function in the pipe “|”, it will be before processing pipeline operators “|” custom data, including custom data will automatically be the parameters of the filter function.

<! - in a pair of curly braces - > {{message | capitalize}} <! - in - bind ` ` v -- -- > < div v - bind: id = "rawId | formatId" > < / div >Copy the code

Filters can be divided into local filters and global filters. See details below.

Two. Local filter

1. Local filters define local filters in the options of a component that can be used only by that component. For example, define a filter that converts the timestamp to the date format (note the steps) :

<template> <div> <! - 4. Apply colours to a drawing data, set up filters - > {{times | conversion}} < / div > < / template > < script > export default {data () {return {/ / 1. Times: 1616959086000,}; }, // 2. Define filters: {//3. Conversion: function (value) {// Call Date method, handle timestamp return new Date(value).tolocaleString (); ,}}}; </script>Copy the code

As a result, the conversion succeeds:

2. Not only that, filters can also be connected in series, that is, multiple filters can be defined, such as the following, equivalent to the conversion function to process The Times data to get the result, and then continue to use againChange function to process the previous result to get the final result:

 {{ times | conversion | againChange }}
Copy the code

The basic demo is as follows:

<template> <div> <! -- 5. Put the filters - > {{times | conversion | againChange}} < / div > < / template > < script > export default {data () {return {/ / 1. Times: 1616959086000,}; }, // 2. Define filters: {//3. Conversion: function (value) {// Call Date method, handle timestamp return new Date(value).tolocaleString (); } againChange: function (value) {return "time:" + value; ,}}}; </script>Copy the code

3. At the same time, the filter can also receive parameters, for example, we improve the first point of the example, convert the timestamp to the specified format of the time format, the desired time format as the filter parameter, the specific usage is as follows (note the steps) :

<template> <div> <! -- 4. Put the filter and pass the parameters at the same time. Returns when the specified format - > {{times | conversion (" MM - dd yyyy - HH: MM: ss week w ")}} < / div > < / template > < script > export default {data () { return { // 1. Times: 1616959086000,}; }, // 2. Define filters: {//3. Define a processing function that takes value as the data to process and format as the passed parameter conversion: Function (value, format) {var date = new date (value); 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 = [" day ", "a", "2", "three", "four", "five", "six"); return a[date.getDay()]; }) ()}; for (let i in getTime) { format = format.replace(i, getTime[i]); } return format; ,}}}; </script>Copy the code

The results are as follows:

Global filters

Since called global, that naturally is before creating Vue instance global definition filter, after configuring all components directly on the line. It is usually defined in a custom file. For example, the filter above handles the timestamp as follows:

1. Define the filters folder in the SRC directory and define a filters.js file in the filters 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 = [" day ", "a", "2", "three", "four", "five", "six"); return a[date.getDay()]; }) ()}; for (let i in getTime) { format = format.replace(i, getTime[i]); } return format; } export {conversion // export method from here}Copy the code

3. Introduce global filters in main.js:

Set the global filter format to vue. filter(‘ filter name ‘, corresponding to handler);

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

4. Directly available in a component:

<template> <div> <! -- 2. Put the filter and pass the parameter at the same time. To specify the format of time - > {{times | conversion (" MM - dd yyyy - HH: MM: ss week w ")}} < / div > < / template > < script > export default {data () { return { // 1. Times: 1616959086000,}; }}; </script>Copy the code

The same result:

4. Extension

As you can see, filters are a little like computed attributes in usage. What is the difference?

1. Filters can pass parameters, but cannot access this. There is no caching function. The filters can also be connected in series. Can be set locally and globally. Filter is relatively simple and only fires when explicitly invoked. It is usually used for template rendering.

2. Computed does not pass parameters, but accesses this, which operates on variables. The processing logic behind it is complex, has caching capability, and is more universal in components. Therefore, it is suitable for complex data conversion and statistics scenarios.

In live.

This is the general outline of the filters filter. In general, filters filters can be divided into local filters and global filters. Local filters are valid within components, and global filters are valid within each component. You can set multiple filters and pass parameters to filters. General filters are applied to some simple data rendering.

Click to follow, the first time to learn about Huawei cloud fresh technology ~