動態顯示Vue組件

使用Vue，您可以使用組件定義應用程序佈局。在開始時，您手動將組件放置在所需的位置，但是在某些時候，您需要一種更靈活的方式來根據應用程序狀態顯示或隱藏組件。

使用條件指令

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

這是一個例子。這v-if指令檢查noTodos計算屬性，如果state屬性，則返回falsetodos包含至少一項：

<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指示。

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

componentName是狀態的屬性，用於標識我們要呈現的組件的名稱。它可以是狀態的一部分，也可以是計算的屬性：

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

免費下載我的Vue手冊

動態顯示Vue組件

使用Vue，您可以使用組件定義應用程序佈局。在開始時，您手動將組件放置在所需的位置，但是在某些時候，您需要一種更靈活的方式來根據應用程序狀態顯示或隱藏組件。

使用條件指令

使用component組件和is

更多vue教程：

使用`component`組件和`is`