資料結構
網路
關係資料庫管理系統 (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/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
目錄結構 -- $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>
在本文中，我們演示瞭如何在Vue.js中不使用過濾器的情況下，透過兩個示例來檢查字串是否為迴文。在第一個示例中，我們使用過濾器來檢查字串是否為迴文。在第二個示例中，我們從使用者那裡獲取輸入，並動態檢查字串是否為迴文。
更新於：2023年4月13日
122 次檢視
廣告