动态显示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教程: