在没有Vue路由器的情况下从变量呈现vue模板的不同方法

在没有Vue路由器的情况下，可以使用以下方法从变量呈现Vue模板：

使用条件渲染：通过在模板中使用v-if或v-show指令，根据变量的值来决定是否渲染特定的Vue模板。例如：

<template>
  <div>
    <template v-if="showTemplateA">
      <h1>Template A</h1>
    </template>
    <template v-else>
      <h1>Template B</h1>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTemplateA: true
    };
  }
};
</script>

使用动态组件：通过使用Vue的<component>元素和is特性，根据变量的值动态地切换不同的组件。例如：

<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import TemplateA from './TemplateA.vue';
import TemplateB from './TemplateB.vue';

export default {
  data() {
    return {
      currentComponent: 'TemplateA'
    };
  },
  components: {
    TemplateA,
    TemplateB
  }
};
</script>

使用插槽（slot）：通过在父组件中定义插槽，并在子组件中使用插槽来呈现不同的内容。可以根据变量的值来决定插槽中的内容。例如：

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <ParentComponent>
      <template v-if="showTemplateA">
        <h1>Template A</h1>
      </template>
      <template v-else>
        <h1>Template B</h1>
      </template>
    </ParentComponent>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  },
  data() {
    return {
      showTemplateA: true
    };
  }
};
</script>

这些方法可以根据变量的值来动态地呈现不同的Vue模板。根据具体的需求和场景选择合适的方法。