如何在 Vue.js 中将字符串的第一个字母大写-技术圈

点击关注公众号，Java干货及时送达

英文 | https://codingbeauty.medium.com/vue-capitalize-first-letter-af8ea7f7d6f7

在 Vue 中将字符串的第一个字母大写：

用 [0] 获取字符串的第一个字母。
使用 .toUpperCase() 将此字母大写。
使用 .slice(1) 获取字符串的其余部分。

将结果加在一起。

例如：App.vue

<template><div id="app"><b>{{ name1 }}</b><br />Capitalized: <b>{{ capitalized(name1) }}</b><br /><br /><b>{{ name2 }}</b><br />Capitalized:<b>{{ capitalized(name2) }}</b></div></template>
<script>export default {data() {return { name1: 'coding beauty', name2: 'javascript' };},methods: {capitalized(name) {const capitalizedFirst = name[0].toUpperCase();const rest = name.slice(1);return capitalizedFirst + rest;},},};</script>

我们创建一个可重用的 Vue 实例方法（大写），它接受一个字符串并将其首字母大写。

我们使用括号索引 ([ ]) 来获取字符串的 0 属性 - 索引 0 处的字符。字符串（和数组）索引在 JavaScript 中是从零开始的，因此字符串的第一个字符位于索引 0，第二个字符位于索引 1，依此类推，直到索引 str.length-1 处的最后一个字符。

获取字符串的第一个字符后，我们使用 toUpperCase() 方法将其大写。

我们使用 slice() 方法来获取字符串的其余部分。slice() 返回指定开始索引和可选结束索引之间的字符串部分。如果省略结束索引，则子字符串的范围将从起始索引到字符串的末尾。

因此，slice(1) 返回从第二个字符到末尾的子字符串。

得到字符串的剩余部分后，剩下的就是将它与大写的第一个字母简单地连接起来。

如果结果字符串只需要首字母大写，您可以在 slice() 的结果上调用 toLowerCase() 方法，在连接之前将字符串的其余部分小写。

const capitalizedFirst = name[0].toUpperCase();
// 👇 toLowerCase()const rest = name.slice(1).toLowerCase();return capitalizedFirst + rest;

使用计算属性

如果你试图将 Vue 实例的字符串数据属性大写（就像在我们的例子中），你可以使用计算属性代替方法。

<template><div id="app"><b>{{ name1 }}</b><br />Capitalized: <b>{{ capitalizedName1 }}</b> <br /><br /><b>{{ name2 }}</b><br />Capitalized:<b>{{ capitalizedName2 }}</b></div></template>
<script>export default {data() {return { name1: 'coding beauty', name2: 'javascript' };},methods: {capitalized(name) {const capitalizedFirst = name[0].toUpperCase();const rest = name.slice(1);return capitalizedFirst + rest;},},// 👇 Computed propertiescomputed: {capitalizedName1() {return this.capitalized(this.name1);},capitalizedName2() {return this.capitalized(this.name2);},},};</script>

当数据在应用程序的生命周期中可能发生变化时，例如在与输入字段的双向绑定中，使用计算属性非常有用。当数据属性发生变化时，依赖的计算属性将自动重新计算和更新。

总结

以上就是我今天这篇文章想与你分享的内容，如果你觉得有帮助的话，请记得点赞我，关注我，并将其分享给你的朋友，也许能够帮助到他。

感谢你的阅读。

  
往
期
推
荐
1、社区纠纷不断：程序员何苦为难程序员？
2、该死的单元测试，写起来到底有多痛？
3、互联网人为什么学不会摆烂
4、为什么国外JetBrains做 IDE 就可以养活自己，国内不行？区别在哪？
5、相比高人气的Rust、Go，为何 Java、C 在工具层面进展缓慢？
6、让程序员早点下班的《技术写作指南》
点分享
点收藏
点点赞
点在看

如何在 Vue.js 中将字符串的第一个字母大写

使用计算属性

往期推荐

往
期
推
荐