用Vue框架怎么制作一个基本的菜单切换效果
Admin 2022-06-09 群英技术资� 108 次浏�
本文实例为大家分享了VUE实现菜单内容切换功能,供大家参考,具体内容如下
完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; padding: 0px; } #app{ margin-top: 50px; width:400px; height:300px; border: 1px solid #000000; } li{ list-style: none; float: left; width: 100px; height:50px; line-height:50px; font-size: 18px; font-weight: bold; background: #EEeeee; text-align: center; cursor: pointer; } #wear div{ width: 400px; height: 250px; line-height: 250px; font-size: 20px; font-weight: bold; text-align: center; } #wear img{ width: 400px; height: 250px; } .active{ background: #405c83; } </style> </head> <body> <div id="app"> <ul> <li v-on:click="searId=1" v-bind:class="{active:searId==1}">1</li> <!--v-bind可以省略--> <li @click="searId=2" :class="{active:searId==2}">2</li> <li @click="searId=3" :class="{active:searId==3}">3</li> <li @click="searId=4" :class="{active:searId==4}">4</li> </ul> <div id="wear"> <div v-show="searId==1" ><img src="../img/chun.png"></div> <div v-show="searId==2"><img src="../img/xia.png"></div> <div v-show="searId==3"><img src="../img/qiu.png"></div> <div v-show="searId==4"><img src="../img/dong.png"></div> </div> </div> </body> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#app", data:{ searId:1 //第一个为默认 } }) </script> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要给大家介绍JS中的Proxy对象,一些朋友可能对Proxy对象的用途以及用法不是很了解,对此下文有详细的介绍,有需要的朋友可以参考下面的代码,接下来我们一起来学习Proxy对象吧�
这篇文章主要为大家介绍了Pinia.js状态管理器上手使用指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加�
使用组件库时,图标往往不能满足需�,所以我们常常需要用到第三方图标�,这篇文章主要给大家介绍了关于vue引入iconfont的相关资�,需要的朋友可以参考下
这篇文章主要介绍了vue组件是如何解析及渲染的?,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
这篇文章主要介绍了详解Vite的新体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078