Skip to content
Related Articles

Related Articles

How to convert a normal string to a uppercase string using filter in VueJS ?
  • Last Updated : 22 Feb, 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:

index.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>

app.js




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 galley 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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :