/qq_42345237/article/details/98348889/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]=1this.isactive=0this.isactivel = indexthis.cindex=index},fn: function (index) {this.show_list=[0,0,0,0]this.show_list[index]=1this.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>
如果觉得《vue中动态渲染组件》对你有帮助，请点赞、收藏，并留下你的观点哦！
