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


<!DOCTYPE html>
<html lang="en">
    <script src=
    <div id='parent'>
       <strong>Name :</strong>{{ name | upperCased }}
       <strong>Details : </strong>{{ details | upperCased }}
    <script src='app.js'></script>

Filename: app.js


const parent = new Vue({
  el: "#parent",
  data: {
    name: "Rinkle Roy",
      "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) => {
      return upper.join(" ");


Uppercasing string using filters

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!