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>Result :
<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>
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