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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
