Vue动态组件实现条件渲染和切换示例

本示例演示了如何使用Vue动态组件实现条件渲染和切换功能。通过一个简单的应用场景，展示了动态加载组件的灵活性和便捷性。

<template>
  <div>
    <!-- 切换按钮 -->
    <button @click="toggleComponent">切换组件</button>

    <!-- 动态组件容器 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import FirstComponent from './components/FirstComponent.vue';
import SecondComponent from './components/SecondComponent.vue';

export default {
  data() {
    return {
      // 默认展示第一个组件
      currentComponent: 'first-component',
    };
  },
  methods: {
    toggleComponent() {
      // 根据当前组件切换到另一个组件
      this.currentComponent =
        this.currentComponent === 'first-component'
          ? 'second-component'
          : 'first-component';
    },
  },
};
</script>

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com