电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue切換Tab動態渲染組件的操作

瀏覽:2日期:2022-11-20 11:59:51

使用<component :is='組件名'></component>

結合Element-UI的導航菜單 :

UI組件

el-menu-item里的index寫對應的組件名

點擊事件@select='handleSelect'

<el-menu :default-active='activeIndex' mode='horizontal' @select='handleSelect'> <el-menu-item index='Home'>首頁</el-menu-item> <el-menu-item index='About'>關于我們</el-menu-item></el-menu><component :is='activeIndex'></component>

在點擊事件里動態設置組件名

handleSelect(index) { this.activeIndex = index}

完整代碼

<template> <div id='app'> <!-- 導航欄 --> <el-row type='flex' justify='flex-start' align='middle'> <el-col :span='2' :offset='4'> <div>LOGO</div> </el-col> <el-col :span='12'> <el-menu :default-active='activeIndex' mode='horizontal' @select='handleSelect'> <el-menu-item index='Home'>首頁</el-menu-item> <el-menu-item index='About'>關于我們</el-menu-item> </el-menu> </el-col> </el-row> <component :is='activeIndex'></component> </div> </template> <script> import Home from ’./components/Home.vue’ import About from ’./components/About.vue’ export default { name: ’app’, components: { Home, About }, data(){ return { activeIndex: 'Home' } }, methods: { handleSelect(index) { this.activeIndex = index } } } </script> <style> </style>

補充知識:vue 動態組件(tabs切換)keep-alive:主要用于保留組件狀態或避免重新渲染

通過keep-alive 保留數據值 填寫數據時切換到其他頁面,后返回當前頁數據保留 ,主要用于保留組件狀態或避免重新渲染

<!--動態組件-component使用--> <div class='app'> <ul> <li @click='currView=’home’'>首頁</li> <li @click='currView=’abount’'>關于我們</li> </ul> <!--通過keep-alive 保留數據值 填寫數據時切換到其他頁面,后返回當前頁數據保留--> <keep-alive> <component :is='currView'></component> </keep-alive> </div>

<script type='text/x-Template' id='homeTemp'> <h2>首頁數據</h2></script><script type='text/x-Template' id='abountTemp'> <h2>關于我們數據<input type='text'/></h2></script>

<script type='text/javascript'> var vm=new Vue({ el:’.app’, data:{ currView:'home' }, components:{ 'home':{ template:'#homeTemp' }, 'abount':{ template:'#abountTemp' } } }); </script>

Vue切換Tab動態渲染組件的操作

以上這篇Vue切換Tab動態渲染組件的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: IWIS链条代理-ALPS耦合透镜-硅烷预处理剂-上海顶楚电子有限公司 lcd条形屏-液晶长条屏-户外广告屏-条形智能显示屏-深圳市条形智能电子有限公司 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | 北京开源多邦科技发展有限公司官网 | 四探针电阻率测试仪-振实密度仪-粉末流动性测定仪-宁波瑞柯微智能 | 河南中整光饰机械有限公司-抛光机,去毛刺抛光机,精密镜面抛光机,全自动抛光机械设备 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 地图标注|微信高德百度地图标注|地图标记-做地图[ZuoMap.com] | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | 济南轻型钢结构/济南铁艺护栏/济南铁艺大门-济南燕翔铁艺制品有限公司 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | 间苯二酚,间苯二酚厂家-淄博双和化工 | 不锈钢拉手厂家|浴室门拉手厂家|江门市蓬江区金志翔五金制品有限公司 | 生产加气砖设备厂家很多,杜甫机械加气砖设备价格公道 | 防堵吹扫装置-防堵风压测量装置-电动操作显示器-兴洲仪器 | 国产液相色谱仪-超高效液相色谱仪厂家-上海伍丰科学仪器有限公司 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 钢衬玻璃厂家,钢衬玻璃管道 -山东东兴扬防腐设备有限公司 | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 | 芝麻黑-芝麻黑石材厂家-永峰石业 | 微波萃取合成仪-电热消解器价格-北京安合美诚科学仪器有限公司 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂 | 佛山市钱丰金属不锈钢蜂窝板定制厂家|不锈钢装饰线条|不锈钢屏风| 电梯装饰板|不锈钢蜂窝板不锈钢工艺板材厂家佛山市钱丰金属制品有限公司 | 定硫仪,量热仪,工业分析仪,马弗炉,煤炭化验设备厂家,煤质化验仪器,焦炭化验设备鹤壁大德煤质工业分析仪,氟氯测定仪 | 伶俐嫂培训学校_月嫂培训班在哪里报名学费是多少_月嫂免费政府培训中心推荐 | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | _网名词典_网名大全_qq网名_情侣网名_个性网名 | 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 垃圾处理设备_餐厨垃圾处理设备_厨余垃圾处理设备_果蔬垃圾处理设备-深圳市三盛环保科技有限公司 |