如何在 Vue.js 中将标题工具​​提示大写

Question

如何仅将标题工具​​提示的第一个字母大写（来自 span）？我尝试使用 CSS text-transform: capitalize;，但没有用。

<template lang="pug">
    .cell-audience-status-dot(:class="{'overflow-initial': type === 'actions'}")
        .cell-content.audiences(v-if="data !== 'never_activated'")
            .icon-wrapper(:class="{ active : activeMenu === 'activeSegments' && openedSegments.includes(fullData.id) }")
                span.icon(:title="data" :class="getStatusColor") &#9679;
</template>

<script>
import { get } from 'vuex-pathify'

export default {
    name: 'cellStatus',
    props: ['data', 'type', 'fullData'],
    computed: {
        openedSegments: get('activeSegments/openedSegments'),
        activeMenu: get('menu/activeMenu'),
        getStatusColor() {
            const { data } = this
            if (data === 'active') return 'green'
            else if (data === 'inactive') return 'red'
            else if (data === 'paused') return 'orange'
            return ''
        }
    },
}
</script>

Answer 1

要仅将文本的第一个字母大写，您可以使用 css 选择器 :first-letter 和 text-transform: uppercase;

 .title:first-letter {
     text-transform: uppercase;
 }

<div class="title">my text</div>

Answer 2

创建 computed property returns data 的大写形式：

export default {
  computed: {
    title() {
      return this.data?.length && this.data[0].toUpperCase() + this.data.slice(1)
    }
  }
}

而不是 data，将计算的属性绑定到 span 的 title 属性：

span.icon(:title="title" :class="getStatusColor") ●
                    

demo