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=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</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(" ");
    },
  },
});