How to convert a normal string to a uppercase string using filter in VueJS ?
Last Updated :
15 Dec, 2021
Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an object. A single filter is a function that accepts a value and returns another value. The returned value is the one that’s actually printed in the Vue.js template. To uppercase string using filters, we have to write logic to convert a regular string into all uppercase and apply the filter on a required string.
Example 1:
Filename: index.html
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ head >
< body >
< div id = 'parent' >
< p >
< strong >Name :</ strong >{{ name | upperCased }}
</ p >
< p >
< strong >Details : </ strong >{{ details | upperCased }}
</ p >
</ div >
< script src = 'app.js' ></ script >
</ body >
</ html >
|
Filename: app.js
Javascript
const parent = new Vue({
el: "#parent" ,
data: {
name: "Rinkle Roy" ,
details:
"simply dummy text of the printing and typesetting industry.\
Lorem Ipsum has been the industry's standard dummy\
text ever since the 1500s, when an unknown printer \
took a gallery of type and scrambled it to make a type\
specimen book. It has survived not only five centuries,\
but also the leap into electronic typesetting, remaining\
essentially unchanged" ,
},
filters: {
upperCased: function (data) {
upper = [];
data.split( " " ).forEach((word) => {
upper.push(word.toUpperCase());
});
return upper.join( " " );
},
},
});
|
Output:
Uppercasing string using filters
Share your thoughts in the comments
Please Login to comment...