如何在 Vue.js 中將字符串的第一個(gè)字母大寫
點(diǎn)擊關(guān)注公眾號(hào)，Java干貨及時(shí)送達(dá)
英文 | https://codingbeauty.medium.com/vue-capitalize-first-letter-af8ea7f7d6f7
用 [0] 獲取字符串的第一個(gè)字母。 使用 .toUpperCase() 將此字母大寫。 使用 .slice(1) 獲取字符串的其余部分。
<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>
我們創(chuàng)建一個(gè)可重用的 Vue 實(shí)例方法（大寫），它接受一個(gè)字符串并將其首字母大寫。
我們使用括號(hào)索引 ([ ]) 來獲取字符串的 0 屬性 - 索引 0 處的字符。字符串（和數(shù)組）索引在 JavaScript 中是從零開始的，因此字符串的第一個(gè)字符位于索引 0，第二個(gè)字符位于 索引 1，依此類推，直到索引 str.length-1 處的最后一個(gè)字符。
獲取字符串的第一個(gè)字符后，我們使用 toUpperCase() 方法將其大寫。
我們使用 slice() 方法來獲取字符串的其余部分。slice() 返回指定開始索引和可選結(jié)束索引之間的字符串部分。如果省略結(jié)束索引，則子字符串的范圍將從起始索引到字符串的末尾。
因此，slice(1) 返回從第二個(gè)字符到末尾的子字符串。
得到字符串的剩余部分后，剩下的就是將它與大寫的第一個(gè)字母簡(jiǎn)單地連接起來。
如果結(jié)果字符串只需要首字母大寫，您可以在 slice() 的結(jié)果上調(diào)用 toLowerCase() 方法，在連接之前將字符串的其余部分小寫。
const capitalizedFirst = name[0].toUpperCase();// ?? toLowerCase()const rest = name.slice(1).toLowerCase();return capitalizedFirst + rest;
使用計(jì)算屬性
如果你試圖將 Vue 實(shí)例的字符串?dāng)?shù)據(jù)屬性大寫（就像在我們的例子中），你可以使用計(jì)算屬性代替方法。
<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>
往 期 推 薦
3、互聯(lián)網(wǎng)人為什么學(xué)不會(huì)擺爛
4、為什么國(guó)外JetBrains做 IDE 就可以養(yǎng)活自己，國(guó)內(nèi)不行？區(qū)別在哪？
點(diǎn)分享
點(diǎn)收藏
點(diǎn)點(diǎn)贊
點(diǎn)在看
