Open In App

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

Last Updated : 15 Dec, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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



Previous Article
Next Article

Similar Reads

How to check given string is Palindrome or not using filter in VueJS ?
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 templ
2 min read
AngularJs uppercase Filter
The uppercase Filter in AngularJS is used to change a string to an uppercase string or letters. Syntax: {{ string | uppercase}} Example: This example describes the use of the uppercase Filter in AngularJS. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;uppercase Filter&lt;/title&gt; &lt;script src= &quot;https://ajax.google
1 min read
How to convert uppercase string to lowercase using PHP ?
The best way to convert uppercase string to lowercase in PHP is by using the strtolower() function. It takes the string as the input and converts it's all characters to the lower case and returns the string value. Syntax: string strtolower( $string ) Return value: It returns the string converted into lower string. Example 1: C/C++ Code &lt;?php ech
1 min read
How to convert lowercase string to uppercase using PHP ?
A string is a storage object in PHP comprising characters, numbers or special symbols. Strings in PHP are case-sensitive. The interconversion between lower and upper case can be easily done using various in-built methods in PHP. Approach 1: Using chr() method: This approach uses a variety of in-built PHP methods to convert a string to upper case ch
3 min read
Capitalizing a string using filters in VueJS
Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. Filters are a functionality provid
2 min read
How to convert the first character to uppercase using PHP ?
A string is a combination of words combined together. The first character of the string can be converted to an upper case in case it is a lower case alphabetic character. Approach 1 : Using chr() method Step 1: The first character of a string can be extracted using the first index, str[0] returns the first character of the input string. Step 2: The
3 min read
How to convert first character of all the words uppercase using PHP ?
To convert the first character of all the words present in a string to uppercase, we just need to use one PHP function i.e. ucwords(). ucwords(string,delimiters): This function takes 2 parameters. The first one is the string which is mandatory. The second parameter is the delimiter. Example 1: C/C++ Code &lt;?php echo ucwords(&quot;welcome to geeks
1 min read
How to convert LowerCase values to UpperCase in Input Field using ReactJS ?
In React, to convert the Lower case input values to uppercase we can use the Javascript methods like toUpperCase and toLocaleUppercase methods along with the event listeners. Prerequisites:React JSNPM &amp; Node.jsJavaScript toUpperCase methodApproach:To convert LowerCase values to UpperCase in the Input Field using React JS we will be using the Ja
2 min read
How to Convert a String to Uppercase in JavaScript ?
In JavaScript, you can convert a string to uppercase using the toUpperCase() method, which is available on string objects. This method returns a new string with all alphabetic characters converted to uppercase. Syntax:string.toUpperCase()string: The string that you want to convert to uppercase.Example: Here, the toUpperCase() method is called on th
1 min read
PHP Filter and Filter Constant
PHP Filter is an extension that filters the data by either sanitizing or validating it. It plays a crucial role in the security of a website, especially useful when the data originates from unknown or foreign sources, like user-supplied input. For example data from an HTML form. There are mainly two types of filters which are listed below: Validati
3 min read