vue-filters-collection
Version:
A collection of handy vuejs filters.
122 lines (96 loc) • 3.4 kB
Markdown
vue-filters-collection is a collection of filters that help transform/convert strings in a more convenient way. the following is a list of all the available filters (_For now_)
- `camelcasToReadable` - Will converts a camelcase string to a readable string JamesMay will be James May
- `capitalize` - takes an argument, _first_ capitalizies the first character/s in a string. eg james may will be James May
if no argument is passed the whole string will be converted to uppercase e.g james may will be JAMES MAY
- `decapitalize` - converts the whole string to small letters.
- `htmlEntities` - substitutes " htmlentity with a double quote.
- `replaceAll` - finds and replace all occurrences for a single string.
```
npm install vue-filters-collection
or
yarn add vue-filters-collection
```
```javascript
import Vue from 'vue';
import vueFiltersCollection from 'vue-filters-collection';
Vue.use(vueFiltersCollection);
```
```javascript
<template>
<div id="app">
<div>{{ pCapitalize | capitalize }}</div>
//JAMES MAY
<div>{{ pCapitalize | capitalize("first") }}</div>
//Jame May
<div>{{ pDecapitalize | decapitalize }}</div>
//james may
<div>{{ pEntities | htmlEntities }}</div>
//Hello "james" may
<div>{{ pCamelcase | camelcase }}</div>
//Asta Lavista Baby
<div>
{{ pReplaceAll }} :{{ pReplaceAll | replaceAll("this", "that") }} -
replace all
</div>
//that is not a thattle, that is a cactus
<div v-for="key in entities" :key="key">
<h3>
{{ key }} --------------
<span class="ent">{{ key | htmlEntities }}</span>
</h3>
</div>
{{ pEntities }} :{{ pEntities | htmlEntities }} - htmlEntities
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
pCapitalize: "james may",
pDecapitalize: "JAMES MAY",
pEntities: "Hello "james" may",
pCamelcase: "astaLavistaBaby",
pReplaceAll: "This is not a thistle, THIS is a cactus",
//new html entities
entities: {
quo: "" or "",
excla: "! or !",
hash: "# or #",
dolle: "$ or $",
perc: "% or %",
amp: "& or &",
apo: "' or '",
lpar: "( or (",
rpar: ") or )",
ast: "* or *",
commat: "&@ or @",
space: " or  ",
copy: "© or ©",
pound: "£ or £",
euro: "€ or €",
micro: "µ or µ",
},
};
},
};
</script>
```
```javascript
doTheBoogie(){
console.log(this.$options.filters.capitalize(this.pCapitalize)); //JAMES MAY
//or
console.log(this.$capitalize("james"));
// ......
}
```
- Need to add more html entities See [ASCII Characters (Printable)](https://dev.w3.org/html5/html-author/charref).
- Need to add more filters
- Add tests