私の名前は: {{ formattedName }} です
export default { props: { name: { type: String, required: true }, }, computed: { formattedName() { return this.name.charAt(0).toUpperCase() + this.name.slice(1).toLowerCase(); }, }, }; テンプレートからは 単純に変数を参照 裏側で get フックが呼ばれる フック通過後の値をレンダ私の名前は: {{ name }} です
`, }) export class SelfIntroductionComponent { private _name = ''; @Input() set name(value: string) { this._name = value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(); } get name(): string { return this._name; } } コンポーネント初期化時に set フックを通る