Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to capitalize a String using VueJs filters?
Vue can be defined as a progressive framework for building the user interfaces. It has multiple directives that can be used as per the user needs. The basic core library is mainly focused on building the view layer only and it is also easy to pick up other libraries or integrate with them.
In the below article, we will see how to capitalize a particular string. Capitalizing is basically a process where only the first character of a string is in capital letters and remaining all the characters are in lower case.
We can capitalize a string by getting the first character out of it, changing its case to upper case and then merging it back with the original string. Also if we receive a completely uppercase string, we need to first change its case to lowercase and then capitalize the first character from the string.
Example: Capitalizing a String
Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy and paste the below code snipped into your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Capitalizing the String values
const parent = new Vue({
el: '#parent',
data: {
str1: "tutorialspoint",
str2: "TutorialsPoint originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.",
},
filters: {
capitalize: function (data) {
capitalized = []
data.split(' ').forEach(word => {
capitalized.push(
word.charAt(0).toUpperCase() +
word.slice(1).toLowerCase()
)
})
return capitalized.join(' ')
}
}
})
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<p><strong>Name : </strong>
{{ str1 | capitalize }}
</p>
<p><strong>Details : </strong>
{{ str2 | capitalize }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>Name : </strong> {{ str1 | capitalize }} </p>
<p><strong>Details : </strong> {{ str2 | capitalize }} </p>
</div>
<script>
// Capitalizing the String values
const parent = new Vue({
el: '#parent',
data: {
str1: "tutorialspoint",
str2: "TutorialsPoint originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.",
},
filters: {
capitalize: function(data) {
capitalized = []
data.split(' ').forEach(word => {
capitalized.push(
word.charAt(0).toUpperCase() +
word.slice(1).toLowerCase()
)
})
return capitalized.join(' ')
}
}
})
</script>
</body>
</html>
Example: Capitalizing a String
Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy and paste the below code snipped into your Vue project and run the Vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Capitalizing the String values
const parent = new Vue({
el: '#parent',
data: {
name: "WELCOME TO TUTORIALSPOINT",
},
filters: {
capitalize: function (data) {
capitalized = []
data.split(' ').forEach(word => {
capitalized.push(
word.charAt(0).toUpperCase() +
word.slice(1).toLowerCase()
)
})
return capitalized.join(' ')
}
}
})
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<p><strong>Name : </strong>
{{ name | capitalize }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p>{{ name | capitalize }} </p>
</div>
<script>
// Capitalizing the String values
const parent = new Vue({
el: '#parent',
data: {name: "WELCOME TO TUTORIALSPOINT",},
filters: {
capitalize: function(data) {
capitalized = []
data.split(' ').forEach(word => {
capitalized.push(
word.charAt(0).toUpperCase() +
word.slice(1).toLowerCase()
)
})
return capitalized.join(' ')
}
}
})
</script>
</body>
</html>
In the above example program, we capitalize the string "WELCOME TO TUTORIALSPOINT". The final output after capitalization is "Welcome To Tutorialspoint".
1K+ Views
