Tmeplate 的作用 - daniel-qa/Vue GitHub Wiki

Tmeplate 的作用

< template> 的作用

1 .組織多個子節點：

< template> 是一個邏輯容器，允許你在需要條件渲染（如 v-if）、循環渲染（如 v-for）時包裹多個元素，避免 Vue 要求的單根節點限制。 不會產生額外的 DOM 元素。

2 .條件渲染：

用於條件渲染時，當條件不滿足時，整個

範例：

<template v-if="isVisible">
  <p>内容 1</p>
  <p>内容 2</p>
</template>

3 .提高靈活性：

允許在模板中組織結構而不受單一根元素限制，例如嵌套子組件時的結構化設計。

範例：

<template>
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</template>

4 .提高靈活性：

允許在模板中組織結構而不受單一根元素限制，例如嵌套子組件時的結構化設計。

應用場景

1 . 條件渲染多個元素：

<template v-if="show">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

2 循環渲染多個元素：

<template v-for="item in items" :key="item.id">
  <p>{{ item.text }}</p>
  <span>{{ item.detail }}</span>
</template>

3 .避免多餘的包裹元素：

如果不用 < template>，條件渲染時需要額外加一個父節點，比如

，這樣會多出不必要的 DOM 層級： 
<div v-if="show">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

使用 < template> 則避免了這個問題。

  • template 标签是逻辑性的，不会渲染到页面，因此不能定义 style，需要将样式应用到可渲染的 DOM 元素（如 div、span 等）上。
<template>
  <div style="display: flex; flex-direction: column; align-items: center;">
    <!-- 第一层菜单，显示选项的文字 -->
    <div v-if="node.level === 1" class="menu-option">
      {{ node.text }}
    </div>
  </div>
</template>
⚠️ **GitHub.com Fallback** ⚠️