Tuesday, April 10, 2018

[Vue.js][Tutorial] filter on interpolations

Vue.js allows you to define FILTERS that can be used to apply common text formatting, it is usable in two places: mustache interpolations and v-bind expressions


syntax apply on interpolations
{{string | toLowercase }}
String hold the value which would apply the filter, and the toLowercase is the filter.

Example code:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>
<head><title>Local filter - Vue.js</title></head>
<body>
    <div id="app">
    <h1>Without filter</h1>
    {{string}}
    <h1>With filter</h1>
    {{ string | toLowercase }}
    </div>
</body>
<script>
new Vue({
    el:"#app",
    data:{
        string:"STRING",
    },
    filters:{
        toLowercase(value){
            return value.toLowerCase();
        }
    }

});
</script>
</html>
Result :
Here we use value “string“ which hold “STRING” as input, and pass as an argument to the filter toLowercase to convert the text in format you want. You can think filter works similar as a method.

No comments :

Post a Comment