資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 VueJs 過濾器將字串首字母大寫？
Vue 可以被定義為一個用於構建使用者介面的漸進式框架。它有多個指令，可以根據使用者的需求使用。核心庫主要專注於構建檢視層，並且易於學習其他庫或與之整合。
在下面的文章中，我們將瞭解如何將特定的字串首字母大寫。首字母大寫基本上是一個過程，其中字串的第一個字元為大寫字母，其餘所有字元為小寫字母。
我們可以透過從字串中獲取第一個字元，將其轉換為大寫，然後將其合併回原始字串來將字串首字母大寫。此外，如果我們收到一個完全大寫的字串，我們需要先將其轉換為小寫，然後將字串的第一個字元大寫。
示例：將字串首字母大寫
在您的 Vue 專案中建立兩個檔案 app.js 和 index.html。下面給出了包含程式碼片段的檔案和目錄結構。將下面的程式碼片段複製貼上到您的 Vue 專案中並執行 Vue 專案。您將在瀏覽器視窗中看到以下輸出。
檔名 - app.js
目錄結構 -- $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(' ')
}
}
})
檔名 - index.html
目錄結構 -- $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>
執行以下命令以獲取以下輸出 -
C://my-project/ > npm run serve
完整程式碼
<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>
示例：將字串首字母大寫
在您的 Vue 專案中建立兩個檔案 app.js 和 index.html。下面給出了包含程式碼片段的檔案和目錄結構。將下面的程式碼片段複製貼上到您的 Vue 專案中並執行 Vue 專案。您將在瀏覽器視窗中看到以下輸出。
檔名 - app.js
目錄結構 -- $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(' ')
}
}
})
檔名 - index.html
目錄結構 -- $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>
執行以下命令以獲取以下輸出 -
C://my-project/ > npm run serve
完整程式碼
<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>
在上面的示例程式中，我們將字串“WELCOME TO TUTORIALSPOINT”的首字母大寫。首字母大寫後的最終輸出為“Welcome To Tutorialspoint”。
3K+ 次檢視
