在vuejs中使用动态布局

<template>
  <div>
    <button @click="layoutType = 'grid'">Grid Layout</button>
    <button @click="layoutType = 'list'">List Layout</button>

    <div v-if="layoutType === 'grid'">
      <!-- 渲染网格布局 -->
      <GridLayout />
    </div>

    <div v-else-if="layoutType === 'list'">
      <!-- 渲染列表布局 -->
      <ListLayout />
    </div>
  </div>
</template>

<script>
import GridLayout from './components/GridLayout.vue';
import ListLayout from './components/ListLayout.vue';

export default {
  data() {
    return {
      layoutType: 'grid'
    };
  },
  components: {
    GridLayout,
    ListLayout
  }
};
</script>