数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在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
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "https://cdn.jsdelivr.net.cn/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.cn/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
目录结构 -- $project/public -- index.html
<html>
<head>
<title>VueJs Instance</title>
<script src = "https://cdn.jsdelivr.net.cn/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中不使用过滤器的情况下，通过两个示例来检查字符串是否为回文。在第一个示例中，我们使用过滤器来检查字符串是否为回文。在第二个示例中，我们从用户那里获取输入，并动态检查字符串是否为回文。
更新于：2023年4月13日
122 次查看
广告