動態顯示Vue組件

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

使用條件指令

最簡單的選擇是使用v-ifv-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-ifv-else結構,您可以構建您的模板,以便有一個佔位符將被動態分配一個組件。

那就是component組件確實在v-bind:is指示。

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

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

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

免費下載我的Vue手冊


更多vue教程: