在模板中插值 header 表達式

Vue 3 應用程式

在 ShoppingCart 組件的 script 標籤內，我會建立一個初始值的 header ref。接著，模板使用 mustache 語法 {{ expression }} 來評估 ref 並顯示其值。 記得從‘vue’導入 ref。 Vue 可以根據初始值推斷 ref 的類型。由於初始值是字串，因此 header 是字串類型。

<script setup lang="ts">
import { ref } from 'vue'
const header = ref('Shopping List App - Vue 3')
</script>

<template>
  <h1>{{ header }}</h1>
</template>

在 script 標籤內，我從 vue 匯入了 ref，並建立了一個 header ref。模板使用 mustache 語法來評估該 ref 並顯示其值。

SvelteKit 應用程式

Svelte 5 使用 runes 來創建響應式狀態。我用 $state 建立一個 header 狀態，模板則使用單一大括號來評估 rune 並展示其值。 Svelte 可以根據初始值推斷 $state 的類型。由於初始值是字串，因此 header 是字串類型。

<script lang="ts">
let header = $state('Shopping List App - Svelte 5');
</script>

<h1>{header}</h1>

Angular 19 應用程式

Angular 用 Signal 來儲存響應式狀態。我會在 ShoppingCartComponent 類內建立一個初始值的 header signal，然後模板使用 mustache 語法 {{ expression }} 來評估 header 的 getter 函式並顯示它的值。 Angular 可以根據初始值推斷 Signal 的類型。由於初始值是字串，因此 header 是字串類型。

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

@Component({
  selector: 'app-shopping-cart',
  imports: [],
  template: `
    <h1>{{ header() }}</h1>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  header = signal('Shopping List App - Angular');
}

在 ShoppingCartComponent 類內，我匯入了 signal 並建立一個 header signal。模板利用 mustache 語法來呼叫 header 的 getter 函式並顯示其值。

該組件會在 h1 標籤內顯示 "Shopping List App - Angular"。

我們已成功讓購物車組件能在模板內顯示 header 值。

Github 原始碼倉庫

• 基於 Vue 3: https://github.com/railsstudent/fundamental-vue3
• 基於 Angular: https://github.com/railsstudent/fundamental-angular
• 基於 Svelte: https://github.com/railsstudent/fundamental-svelte