使用Vue指令实现下拉菜单效果
模仿重庆红岩历史革命博物馆官网的导航栏内容和效果，使用Vue实现。
官网地址如下：https://www.hongyan.info/
官网效果
效果图片展示
我们可以用v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式的特殊语法，其中 items 是源数据数组，而item 则是被迭代的数组元素的别名。
代码展示
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="token punctuation">"><title>Documenttitle><scriptsrc="https://unpkg.com/vue@next">script><style>ul,li{list-style: none;}a{text-decoration: none;}.nav{margin-top: 50px;height: 100px;background-color: #eb131e;}.nav-list{width: 1500px;margin: 0 auto;}.menus{float: left;}.menus .menus-a{float: left;font-size: 25px;color: #ffffff;font-weight: bold;width: 140px;text-align: center;height: 70px;padding: 30px 0 0 0;border-right: 3px #FFFFFF solid;}.menus>.menus-a:hover{background-color: #cf2913;color: #fae92b;}.nav-list-menu{display: block;width: 110px;text-align: center;z-index: 1000;margin-top: 100px;}.subMenu a{float: left;font-size: 20px;background-color: #EB131E;color: #FFFFFF;width: 120px;height: 50px;line-height: 50px;text-align: center;border-top: 1px #909090 solid;}.subMenu a:hover{background-color: #ffaa00;}style>head><body><divid="app">div><templateid="root"><divclass='nav'><ulclass="nav-list"><liv-for="(nav,index) in menus":key="index"class="menus"@mouseover="nav.show=!nav.show"@mouseout="nav.show=!nav.show"><a:href="nav.url"class="menus-a">
{{nav.name}}a><ulclass="nav-list-menu"v-show='nav.show'><liv-for="subMenu in nav.subMenus"class="subMenu"><a:href="nav.url">
{{subMenu.name}}a>li>ul>li>ul>div>template><script>const app= Vue.createApp({
template:'#root',data(){return{
menus:[{name:'首页',url:'#'},{name:'关于红岩',url:'#',subMenus:[{name:'红岩文化',url:'#',},{name:'博物馆机构',url:'#',},{name:'历史沿革',url:'#',},]},{name:'公告动态',url:'#',subMenus:[{name:'文博信息',url:'#',},{name:'政务平台',url:'#',},{name:'公告',url:'#',},{name:'专题报道',url:'#',},]},{name:'馆藏精品',url:'#',subMenus:[{name:'一级文物',url:'#',},{name:'二级文物',url:'#',},{name:'三级文物',url:'#',},]},{name:'陈列展览',url:'#',subMenus:[{name:'虚拟展览',url:'#',},{name:'基本陈列',url:'#',},{name:'复原陈列',url:'#',},{name:'临时展览',url:'#',},{name:'展览交流',url:'#',},]},{name:'研究开发',url:'#',subMenus:[{name:'历史研究',url:'#',},{name:'艺术创作',url:'#',},{name:'影音在线',url:'#',},{name:'文创产品',url:'#',},]},{name:'公共教育',url:'#',subMenus:[{name:'党性教育',url:'#',},{name:'爱国主义教育',url:'#',},{name:'研学实践教育',url:'#',},{name:'科普教育',url:'#',},]},{name:'参观服务',url:'#',subMenus:[{name:'景点介绍',url:'#',},{name:'服务内容',url:'#',},{name:'网上预约',url:'#',},{name:'志愿服务',url:'#',},]},{name:'网上预约',url:'#',},]}},})
app.mount('#app')script>body>html>
京公网安备 11010802041100号