如何在vuejs中使第一个字母大写

Posted 2023-02-16

【中文标题】如何在vuejs中使第一个字母大写

【英文标题】：How do I make the first letter uppercase in vuejs

【发布时间】：2022-01-18 18:31:27

【问题描述】：

我希望此数据的第一个字母为大写

<li>error</li>

我该怎么办？

【问题讨论】：

这能回答你的问题吗？ Vue.js: uppercase doesn't work

【参考方案1】：

选项 1：字符串插值

您可以在error 的第一个字符上使用toUpperCase()，并在其余字符上附加slice(1)。直接在字符串插值中执行此操作（即模板中的大括号）。

<li> error[0].toUpperCase() + error.slice(1) </li>

选项 2：计算道具

与上述类似，您可以使用computed property 创建字符串，并在字符串插值中渲染：

<li> computedError </li>

<script>
export default 
  computed: 
    computedError() 
      return this.error[0].toUpperCase() + this.error.slice(1)
    
  

</script>

选项 3：CSS text-transform: capitalize

您可以使用 CSS 来代替 javascript，使用 text-transform：

<li class="error"> error </li>

<style scoped>
.error 
  text-transform: capitalize;

</style>