极客笔记如何使用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”。