平湖市住房和城乡规划建设局网站,金华大企业网站建设有哪些,营销型网站建设ppt模板,软件定制开发需要多少钱为什么要动态渲染#xff1f; 比如我们现在需要以下侧边栏的数据#xff1a; 如果一个个的去写标签会很麻烦#xff0c;发现导航栏中的数据分为两类#xff0c;一类是一级导航#xff0c;另一位是二级导航#xff08;有子页#xff09;#xff0c;因此直接写两个函数判…为什么要动态渲染 比如我们现在需要以下侧边栏的数据 如果一个个的去写标签会很麻烦发现导航栏中的数据分为两类一类是一级导航另一位是二级导航有子页因此直接写两个函数判断是否有子页然后循环遍历所有的menudata(上图直接显示 上图中的代码可以把这几个导航一级页全部展示出来 完整的代码CommonAside templatedivel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse!--el-menu-item v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{ item.label }}/span/el-menu-item--el-menu-item v-foritem in noChildren :keyitem.name :indexitem.name!-- i标签是图标 --!-- 静态渲染 --!-- i :classel-icon-menu/i --!-- 动态渲染 --!-- 导航的文字 --span slottitle{{item.label}}/span/el-menu-itemel-submenu index1template slottitlei classel-icon-location/ispan slottitle导航一/span/templateel-menu-item-groupel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-group/el-submenu/el-menu/div /templatestyle.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;} /stylescriptexport default {data() {return {isCollapse: false,menuData: [{path: /,name: home,label: 首页,icon: s-home,url: Home/Home},{path: /mall,name: mall,label: 商品管理,icon: video-play, //图标url: MallManage/MallManage},{path: /user,name: user,label: 用户管理,icon: user,url: UserManage/UserManage},{label: 其他,icon: location,children: [{path: /page1,name: page1,label: 页面1,icon: setting,url: Other/PageOne},{path: /page2,name: page2,label: 页面2,icon: setting,url: Other/PageTwo}]}]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},computed:{//无子菜单noChildren() {return this.menuData.filter(item !item.children)},//有子菜单hasChildren() {this.menuData.filter(item item.children)}},} /script重要部分 el-menu-item v-foritem in noChildren :keyitem.name :indexitem.name!-- i标签是图标 --!-- 静态渲染 --!-- i :classel-icon-menu/i --!-- 动态渲染 --i :classel-icon-${item.icon}/i!-- 导航的文字 --span slottitle{{item.label}}/span/el-menu-itemcomputed:{//无子菜单noChildren() {return this.menuData.filter(item !item.children)},//有子菜单hasChildren() {this.menuData.filter(item item.children)}},