vue 动态导航菜单切换显示不同的按钮的实现（实战经验总结）

曾经终败给现在 2023-06-07 10:44 14阅读 0赞

## 首先，先布局 ##

<div class="pwyx-inde-page" id="pwyx-inde-page" v-cloak>
    			<div class="pwyx-main">
    				
    				<div class="pwyx-right left" >
    					<div class="pwyx-index-tab">
    						<div class="left">
    							<ul>
    								<li v-for="(itemTab,index) in listTab" :key="index" :id="index" :class="{on:index==itemIndex}" @click="openWind(index)">{
       {itemTab.tabName}}</li>
    							</ul>
    							
    						</div>
    						<template>
    							<div class="btn-posi">
    								<div v-if="isShowbtn1" class="left">
    									<el-button>按钮1</el-button>
    								</div>
    								<div v-if="isShowbtn2" class="left" >
    									<el-button>按钮2</el-button>
    								</div>
    								<div v-if="isShowbtn3" class="left">
    									<el-button>按钮3</el-button>
    								</div>
    							</div>
    						</template>
    						
    					</div>
    					<div class="clearfix"></div>
    					<div class="pwyx-index-iframe">
    						<iframe v-for="(itemTab,index) in listTab" :key="index" id="main-index" v-if="index==itemIndex" :src="itemTab.url" width="100%" height="700" border="0" scrolling="auto"></iframe>
    					</div>
    				</div>
    			</div>
    		</div>

## 样式表 ##

.pwyx-inde-page ul{ width: 100%;height:100%;padding: 20px;}
    			.pwyx-inde-page ul li{     cursor: pointer;
        float: left;
        width: 100px;
        line-height: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        height: 30px;
        text-align: center;
        line-height: 26px;}
    	.btn-posi{ 
    		
    	}

## js ##

new Vue({ 
    				el: '#pwyx-inde-page',
    				data: function() { 
    					return { 
    						itemIndex:0,
    						isShowbtn1:false,
    						isShowbtn2:false,
    						isShowbtn3:false,
    						listTab: [{ 
    								"id": 1,
    								"tabName": "业务受理",
    								"url": "/pwyx/index/businese_accpet.html",
    								
    							},
    							{ 
    								"id": 2,
    								"tabName": "业务受理",
    								"url": "/pwyx/index/businese_accpet.html",
    							},
    							{ 
    								"id": 3,
    								"tabName": "业务受理",
    								"url": "businese_accpet.html",
    							},
    							{ 
    								"id": 4,
    								"tabName": "业务受理",
    								"url": "businese_accpet.html",
    							},
    							{ 
    									"id": 5,
    									"tabName": "业务受理",
    									"url": "/pwyx/index/businese_accpet.html",
    									
    								},{ 
    									"id": 6,
    									"tabName": "业务受理",
    									"url": "/pwyx/index/businese_accpet.html",
    									
    								},
    						]
    					}
    				},
    				methods: { 
    					openWind:function(index){ 
    						this.itemIndex = index;
    						console.log(index)
    						if(index===1){ 
    							this.isShowbtn1=false;
    							this.isShowbtn2=true;
    							this.isShowbtn3=false;
    							return;
    						}
    						if(index===0){ 
    							this.isShowbtn1=true;
    							this.isShowbtn2=false;
    							this.isShowbtn3=false;
    						}
    						if(index===3){ 
    							this.isShowbtn1=false;
    							this.isShowbtn2=true;
    							this.isShowbtn3=true;
    						}
    						if(index===2){ 
    							this.isShowbtn1=true;
    							this.isShowbtn2=true;
    							this.isShowbtn3=true;
    						}
    						reSetSize();
    					}
    				},
    				mounted: function() { 
    					reSetSize();
    					this.openWind(0);
    				}
    			});
    			//根据浏览器大小调整iframe高度
    
    			window.onresize = reSetSize;
    
    			function reSetSize() { 
    				var windowsHeight = window.innerHeight;
    				document.getElementById("main-index").style.height = (windowsHeight - 150) + "px";
    			}

**记得引入必须的文件哟！！！**