Vue.js 中多表的条件渲染

Question

我正在构建一个 Vue.js 应用程序，需要根据某些条件有条件渲染多个表。我有一组标志来确定应该呈现哪些表，并且我正在努力寻找一种干净有效的方法来实现这一点。

<Table1 v-if="flag1 && !flag2 && !flag3" />
<Table2 v-if="flag2 && !flag1 && !flag3" />
<Table3 v-if="flag3 && !flag1 && !flag2" />

如您所见，这种方法重复且容易出错。我正在寻找一种方法来简化此代码并使其更易于维护。

使用具有多个条件的单个 v-if 语句 为每个表创建一个单独的组件 使用 mixin 来处理条件渲染

我想要的是 一种基于一组标志有条件地渲染多个表的干净而有效的方法 易于维护和扩展的解决方案

<template>
  <div>
    <Table1 v-if="flag1 && !flag2 && !flag3" />
    <Table2 v-if="flag2 && !flag1 && !flag3" />
    <Table3 v-if="flag3 && !flag1 && !flag2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag1: true,
      flag2: false,
      flag3: false
    }
  }
}
</script>

Answer 1

您不渲染多个表格的问题，一次只渲染一个表格。为此，您需要一个状态变量而不是多个布尔值（您可以根据需要命名变量）：

<template>
  <div>
    <Table1 v-if="tableNum === 1" />
    <Table2 v-if="tableNum === 2" />
    <Table3 v-if="tableNum === 3" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableNum: 1
    }
  }
}
</script>