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

Question

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

<li>{{error}}</li>

我该怎么办？

Answer 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>