- Trending Categories
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 check if a string is palindrome or not without filters in VueJs?
Filters basically provides the functionality to check inputs and then apply different type of formatting or transformations to the same. The filter property of a component is an object that accepts a value and return some other confirgured value as a response.
In this article, we will not use filters and therefore directly apply the logic to check if a string is a palindrome or not. For a string to be palindrome the string should be equal to its reverse string. Therefore, we have to first reverse the string and then check the equality of that string with the original string.
Example: Checking palindrome using Filter
First, we need to create a Vue project. To do this you can refer to this page. Create two files app.js and index.html in your Vue project. Copy paste the below code snipped in 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
const parent = new Vue({
el : '#parent',
data : {
st1 : 'tutorialspoint',
st2 : 'naman',
},
filters:{
pCheck : function(data){
var rev = [];
for (let i = data.length - 1, j = 0; i >= 0; i--, j++)
rev[j] = data[i];
reverse = rev.join('');
if(data == reverse) return data + ' : is a Palindrome'
else return data + ' : is not a Palindrome'
}
}
})
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>String1 : </strong>
{{ st1 | pCheck }}
</p>
<p><strong>String2 : </strong>
{{ st2 | pCheck }}
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p><strong>String1 : </strong> {{ st1 | pCheck }}</p>
<p><strong>String2 : </strong> {{ st2 | pCheck }}</p>
</div>
<script>
const parent = new Vue({
el: '#parent',
data: { st1: 'tutorialspoint', st2: 'naman', },
filters: {
pCheck: function(data) {
var rev = [];
for (let i = data.length - 1, j = 0; i >= 0; i--, j++)
rev[j] = data[i];
reverse = rev.join('');
if (data == reverse) return data + ' : is a Palindrome'
else return data + ' : is not a Palindrome'
}
}
})
</script>
</body>
</html>
Example: Checking Palindrome Dynamically
Below is an example of implementing the palindrome check for dynamically added values. For running the below code, paste the below code-snippet in your vue application and then run the code.
FileName - index.html
Directory Structure -- $project/public -- index.html
<html>
<head>
<title>VueJs Instance</title>
<script src = "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>String is : {{name | pCheck}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
pCheck : function(value){
const reverse = value.split("").reverse().join("");
if(value == reverse) return 'Palindrome'
else return 'Not Palindrome'
}
}
});
</script>
</body>
</html>
In this article, we demonstrated how to check if a string is a palindrome or not without filters in Vue.js with the help of two examples. In the first example, we use the filter to check if the string is a palindrome. In the second example, we take input from the user and check dynamically if the string is palindrome or not.
73 Views
