vue中动态渲染组件

最新推荐文章于 2024-07-16 11:34:18 发布

东方佑

最新推荐文章于 2024-07-16 11:34:18 发布

阅读量10w+

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_32759777/article/details/105841071

版权

vue 专栏收录该内容

25 篇文章 69 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在 Vue 框架中如何实现动态组件的渲染，通过使用 `component` 组件和 `is` 特性，可以动态地切换和加载不同的组件，从而提高应用的灵活性和复用性。

摘要由CSDN通过智能技术生成

https://blog.csdn.net/qq_42345237/article/details/98348889
https://www.cnblogs.com/moqiutao/p/11440315.html

自己的代码

<template>
  <div class="top">
    <div class="top_div">
      <div style="background-color:coral;">
        <img style="width: 50px;height: 50px" src="../assets/logo.png">
      </div>
      <div class="top_b" style="background-color:lightblue;">
        <div v-for='(item,index) in arrl'
             :class='{itemhover:index===isactivel}'
             @click='lfn(index)'>
          {{item}}
        </div>
      </div>
    </div>
    <div id="left">
      <div class="left_div" style="background-color:coral;">
        {{arrl[isactivel]}}
      </div>
      <div class="center_div" style="background-color:lightblue;">
        <div class="center_div_header">
          <div v-for='(item,index) in arr[isactivel]'
               :class='{itemhover:index===isactive}'
               @click='fn(index)'>
            {{item}}
          </div>
        </div>
        <div class="center_div_body">

          <div v-show=show_list[index] v-for='(item,index) in arr[isactivel]'
               :class='{itemdisplay :index===isactive}'>
            <component :is="currentView"></component>
          </div>
          </div>
        </div>
      </div>
    </div>

</template>
<script>
  import CommentSetting from './CommentSetting'
  export default {

    name: 'ting',
    table_title: [16, 17, 18, 19],
    data () {
      return {
        itemhoverindex: null,
        isactive: 0,
        isactivel: 0,
        isactivell: 0,
        arr: [['111','222','333','444'],['222','333','444','555'],['333','444','555','666'],['444','555','666','777']],
        arrl: ['111','222','333','444'],
        show_list: [1,0,0,0],
        cindex:0,
        table_list:['home','post','archive',"home"],


      }
    },
    methods: {

      lfn: function (index) {
        console.log(index)
        this.show_list=[0,0,0,0]
        this.show_list[0]=1
        this.isactive=0
        this.isactivel = index
        this.cindex=index
      },
      fn: function (index) {
        this.show_list=[0,0,0,0]
        this.show_list[index]=1
        this.isactive = index
      }



    },
    components: {
      'home':CommentSetting,
      "post":"",
      "archive":""
    },
    computed:{
      currentView(){
        return this.table_list[this.cindex];
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top {
    border: 0;
    display: flex;
    flex-direction: row;
  }

  .top .top_div {
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div div {
    width: 150px;
    height: 50px;
  }

  #left {

    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top #left .left_div{

    height:50px;
  }


  .top #left .center_div {
    height: 800px;
    width: 800px;
    display: flex;
    flex-direction: column;

  }

  .top #left .center_div .center_div_body {
    width: auto;
    height: 800px;
  }


  .top #left .center_div .center_div_header {
    width: auto;
    display: flex;
    flex-direction: row;
  }

  .top #left .center_div .center_div_header div {
    width: 80px;
    background-color: salmon;
  }

  .top .top_div .top_b {
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
  }

  .top .top_div .top_b div {
    width: 150px;
    background-color: darkgray;
  }

  .itemhover {
    background-color: fuchsia !important;
    color: cornflowerblue !important;
    height: 50px;
  }

  .itemdisplay {
    display: block;
    height: 800px;
    background-color: burlywood;
  }
</style>