如何在VueJs中检查字符串是否是回文而不使用过滤器

过滤器基本上提供了检查输入并对其应用不同类型的格式化或转换的功能。组件的filter属性是一个接受一个值并返回另一个配置值作为相应的对象。

在本文中，我们不使用过滤器，直接应用逻辑来检查一个字符串是否是回文。一个字符串是回文的前提是该字符串应与它的反转字符串相等。因此，我们首先要反转字符串，然后检查该字符串与原始字符串的相等性。

示例：使用过滤器检查回文

首先，我们需要创建一个Vue项目。要做到这一点，您可以参考这个页面。在您的Vue项目中创建两个文件app.js和index.html。将以下代码片段复制粘贴到您的Vue项目中，并运行Vue项目。您将在浏览器窗口上看到以下输出。

文件名 – app.js
目录结构 – $ 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'
      }
   }
})

文件名 – index.html
目录结构 — $ 项目/公共目录 — 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>

运行以下命令以获得以下输出 −

C://my-project/ > npm run serve

完整代码

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

示例：动态检查回文

以下是动态添加值进行回文检查的示例。要运行下面的代码，请将下面的代码片段粘贴到您的vue应用程序中，然后运行代码。

文件名- index.html
目录结构–$项目/公共–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>

在这篇文章中，我们展示了如何在Vue.js中检查字符串是否为回文，而不使用过滤器。有两个示例在这里。在第一个示例中，我们使用过滤器来检查字符串是否为回文。在第二个示例中，我们从用户那接收输入，并动态地检查字符串是否为回文。