Skip to content
Related Articles

Related Articles

How to convert a normal string to a uppercase string using filter in VueJS ?

Improve Article
Save Article
  • Last Updated : 15 Dec, 2021
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!