動態顯示Vue元件

使用Vue，您可以使用組件定義應用程式的佈局。起初，您手動將組件放置在所需位置，但有時需要更靈活的方式來根據應用程式狀態顯示或隱藏組件。

使用條件指令

最簡單的選擇是使用 v-if 和 v-else 指令。

這裡有個例子。v-if 指令檢查計算屬性 noTodos，如果狀態屬性 todos 至少包含一個項目，則返回false：

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  computed: {
    noTodos() {
      return this.todos.length === 0
    }
  }
}
</script>

這使得可以解決許多應用程式的需求，而無需達到更複雜的設定。條件可以嵌套，例如：

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

使用 `component` 元件和 `is`

除了使用 v-if 和 v-else 結構，您可以建立模板，其中有一個將動態分配組件的佔位符。

這就是 component 元件所做的事情，借助 v-bind:is 指令的幫助。

1	<component v-bind:is="componentName"></component>

componentName 是狀態的一個屬性，用於識別我們想要渲染的組件的名稱。它可以是狀態的一部分，也可以是計算屬性：

<script>
export default {
  data() {
    return {
      componentName: 'aComponent'
    }
  }
}
</script>

tags: [“Vue.js”, “component”, “conditional rendering”]

動態顯示Vue元件

使用條件指令

使用 component 元件和 is

使用 `component` 元件和 `is`