vue-filters-kit

KO | EN

gitlite — search

#javascript #python #typescript #llm #android #linux #macos #java #awesome #cli #awesome-list #pytorch #ios #open-source

vue-filters-kit

(★ 121)

A collection of useful custom filters for Vue.js(v2.x.x) apps.

vue-filters-kit 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue-Filters-Kit

A collection of useful custom filters for Vue.js(v2.x.x) apps.

## Demo

[Click Here](https://panteng.github.io/vue-filters-kit/)

This demo uses Bootstrap.css for styling. But you should know that no stylesheets are needed for using these filters in your webapps.

## Filters

For now, vue-filters-kit contains 4 custom filters.

1. [Boolean Formatter](#boolean-formatter) - converts boolean values into human-readable texts, eg: true-->YES, 0-->Disabled.
2. [Byte Formatter](#byte-formatter) - converts bytes to kilobytes or megabytes or gigabytes or terabytes, eg: 1000000-->976.56K.
3. [Percentage Formatter](#percentage-formatter) - converts numbers into percentage, eg: 0.1567-->15.67%.
4. [Timestamp Formatter](#timestamp-formatter) - converts timestamps into human-readable time, eg: 1456989887000-->Thursday, March 3rd, 2016

## Getting Started

1. Install via npm:

npm install vue-filters-kit --save

2. Register these filters in your Vue.js app:

const App = new Vue({
            el: '#app',
            // register filters
            filters: {
                booleanFormat: require('vue-filters-kit/filters/booleanFormatter'),
                percentageFormat: require('vue-filters-kit/filters/percentageFormatter'),
                byteFormat: require('vue-filters-kit/filters/byteFormatter'),
                timestampFormat: require('vue-filters-kit/filters/timestampFormatter')
            }
        });

## Usage

#### Boolean Formatter

`{{ rawValue | booleanFormat([trueText], [falseText]) }}`

`[trueText]` is the text that will show if rawValue equals to true.

`[falseText]` is the text that will show if rawValue equals to false.

For example:

{{ isActive | booleanFormat('Yes', 'No') }}

If `isActive` equals to true, the rendered html will be:

Yes

Else if `isActive` equals to false, the result will will be:

No

By default, `[trueText]` is 'Yes' and `[falseText]` is 'No'.

#### Byte Formatter

`{{ rawValue | byteFormat }}`

`rawValue` is a number whose unit is byte.

For example:

{{ size | byteFormat }}

If `size` equals to 1000000, the rendered html will be:

976.56 K

#### Percentage Formatter

`{{ rawValue | percentageFormat([digit]) }}`

`[digit]` is the number of digits to keep after decimal.

For example:

{{ ratio | percentageFormat(4) }}
 {{ ratio | percentageFormat(2) }}

If `ratio` equals to 0.15666666, the rendered html will be:

15.6667%
 15.67%

By default, `[digit]` is 2.

#### Timestamp Formatter

Timestamp Formatter depends on [Moment.js](http://momentjs.com/). Make sure you have installed Moment.js via NPM.

`{{ rawValue | timestampFormat([format]) }}`

`rawValue` is a timestamp in milliseconds.

`[format]` is the format of the output time string.

For example:

{{ startTime | timestampFormat('YYYY/MM/DD') }}

If `startTime` equals to 1456989887000, the rendered html will be:

2016/03/03

By default, `[format]` is 'YYYY-MM-DD HH:mm:ss'. You can see more about `[format]` in [Moment.js Documentation](http://momentjs.com/docs/#/parsing/string-format/).

## License

MIT

vue-filters-kit

vue-filters-kit 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-filters-kit

vue-filters-kit 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README