目前遇到一整個(gè)這樣的需求，假設(shè) product.vue 有如下內(nèi)容：

<template lang="html">
  <div class="product-box">
    <!--頭部組件-->
    <m-header></m-header>
    <!--/頭部組件-->

    <!--中間區(qū)域-->
    <div class="product-center">
      <!--左側(cè)組件-->
      <product-left></product-left>
      <!--/左側(cè)組件-->

      <!--內(nèi)容區(qū)域-->
      <div class="product-content">
        <product-module1 v-if="moduleName == 'module1'"></product-module1>
        <product-module2 v-else-if="moduleName == 'module2'"></product-module2>
        <product-module3 v-else-if="moduleName == 'module3'"></product-module3>
        <product-module4 v-else-if="moduleName == 'module4'"></product-module4>
      </div>
      <!--/內(nèi)容區(qū)域-->
      
    </div>
    <!--/中間區(qū)域-->

    <!--底部組件-->
    <m-footer></m-footer>
    <!--/底部組件-->
  </div>
</template>

moduleName 控制content區(qū)域內(nèi)的模塊顯示（只有一個(gè)模塊顯示）,但是里面的模塊的個(gè)數(shù)是不可預(yù)計(jì)的用if else-if的方式來判斷太過于低效，每新增一個(gè)模塊都會(huì)去手動(dòng)判斷一個(gè)模塊的名稱，有沒有一個(gè)簡便的方法來控制模塊的顯示呢？