下拉框选择对应的不同的详情页面

第一种方式

<template>
    <div>
        <select v-model="selectedChart">
            <option v-for="chart in charts" :key="chart.title" :value="chart.title">
                {{ chart.title }}
            </option>
        </select>
        <div v-if="selectedChart === '本周'">
            <line1 />
        </div>
        <div v-if="selectedChart === '上周'">
            <line2 />
        </div>

    </div>
</template>

<script setup>
import { computed, ref, onMounted, watch, reactive } from 'vue';
import * as echarts from 'echarts';
import line1 from '../lines/line1.vue';
import line2 from '../lines/line2.vue';

const selectedChart = ref('本周')

// reactive 函数只能接受一个对象或数组 const aa = reactive
// 如  数组  
// 响应式数组，包含两个对象，每个对象都有一个 title 属性
// const charts = reactive([{ title: '本周' }, { title: '上周' }]);
//     对象  
// 响应式对象，包含两个属性 thisWeek 和 lastWeek，每个属性都指向一个有 title 的对象
//          const charts = reactive({ 
//             thisWeek: { title: '本周' }, 
//             lastWeek: { title: '上周' } 
//           });

const charts = reactive([{ title: '本周' }, { title: '上周' }])
</script>

第二种方式

<div class="options">
            <select v-model="selectedOption">
                <option value="option1">选项 1</option>
                <option value="option2">选项 2</option>
                <option value="option3">选项 3</option>
            </select>
            <div style="width: 300px;height: 300px;border: 1px solid palevioletred;margin-top: 10px;">
                <Component :is="activeComponent"></Component>
            </div>
   </div>
   
import { ref, reactive, computed } from 'vue';
import { ElTable } from 'element-plus';
import Option1Content from '../../components/tabs/tabone.vue';
import Option2Content from '../../components/tabs/tabtwo.vue';
import Option3Content from '../../components/tabs/tabthree.vue';
const selectedOption = ref('option1')

const activeComponent = computed(() => {
    // activeComponent计算属性根据selectedOption的值返回对应的组件内容。
    switch (selectedOption.value) {
        case 'option1':
            return Option1Content;
        case 'option2':
            return Option2Content;
        case 'option3':
            return Option3Content;
        default:
            return null;
    }
})