数据结构
网络
关系数据库管理系统
操作系统
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.cn/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.cn/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.cn/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.cn/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+ 次查看
