vue中点击顶部导航栏切换不同的组件内容

最新推荐文章于 2024-09-09 16:03:45 发布

Wangxiaoming118

最新推荐文章于 2024-09-09 16:03:45 发布

阅读量1.8k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Wangxiaoming118/article/details/111885111

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<template>
  <div style="margin-top:60px;">
        <h1  @click="change1('Noe')">数据看板</h1>
         <h1 @click="change1('projiectList')"> 数据漏斗</h1>
         <div  :is='myComponent'>
         </div>
  </div>
</template>

<script>
  // import {getMockData}  from  '../../../mock/data.js'
  import   Noe   from  "../project/noe"
  import   projiectList  from  "../project/projiect-list"
export default {
  components:{
 Noe,
 projiectList
  },
  data () {
    return {
      myComponent: 'Noe'
    }
  },
  methods: {
    change1(menu){
                    this.myComponent = menu
                },
  }
}
</script>

<style>
</style>