vue实现模板切换

Vue 实现模板切换的方法

在 Vue 中实现模板切换可以通过多种方式完成，以下是几种常见的方法：

使用 v-if 和 v-else

通过条件渲染动态切换模板：

<template>
  <div>
    <button @click="toggleTemplate">切换模板</button>
    <div v-if="showTemplateA">模板A内容</div>
    <div v-else>模板B内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTemplateA: true
    }
  },
  methods: {
    toggleTemplate() {
      this.showTemplateA = !this.showTemplateA
    }
  }
}
</script>

使用动态组件

通过动态组件实现更灵活的模板切换：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">显示A</button>
    <button @click="currentComponent = 'ComponentB'">显示B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用路由切换

通过 Vue Router 实现不同路由对应不同模板：

const routes = [
  { path: '/template-a', component: TemplateA },
  { path: '/template-b', component: TemplateB }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

使用插槽实现模板切换

通过插槽实现更灵活的布局切换：

<template>
  <div>
    <button @click="currentSlot = 'header'">显示头部</button>
    <button @click="currentSlot = 'footer'">显示底部</button>
    <slot :name="currentSlot"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlot: 'header'
    }
  }
}
</script>

使用 CSS 类切换

通过 CSS 类控制显示/隐藏模板：

<template>
  <div>
    <button @click="activeClass = 'template-a'">模板A</button>
    <button @click="activeClass = 'template-b'">模板B</button>
    <div :class="activeClass">
      <div class="template-a">模板A内容</div>
      <div class="template-b">模板B内容</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'template-a'
    }
  }
}
</script>

<style>
.template-a .template-b,
.template-b .template-a {
  display: none;
}
</style>

选择合适的方法取决于具体需求，简单切换可以使用条件渲染，复杂场景建议使用动态组件或路由。