Vue实现菜单切换功能
更新时间：2020年11月08日 09:55:48 作者：花落(→)凋谢
这篇文章主要为大家详细介绍了Vue实现菜单切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目
这篇文章主要介绍了如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
vue 使用 sortable 实现 el-table 拖拽排序功能
这篇文章主要介绍了vue 使用 sortable 实现 el-table 拖拽排序功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
vue2 element 弹出框拖拽会出现一层阴影问题解决方法
这篇文章主要介绍了vue2 element 弹出框拖拽会出现一层阴影问题解决方法,因增加 draggable 属性导致我弹窗表单清空文本框时,从右向左选中字体会出现拖拽阴影效果,本文给大家介绍vue2 element 弹出框拖拽会出现一层阴影问题解决方法,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了Vue头像处理方案，实现思路主要是通过获取后台返回头像url，判断图片宽度，高度。具体实例代码大家参考下本文2018-07-07
这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
这篇文章主要介绍了Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue 3.0x中的Suspense和异步组件,我们将讨论新的defineAsyncComponent函数,以及如何利用Suspense组件来更好地处理异步组件的加载和显示,需要的朋友可以参考下2023-08-08
动态表单是一个常见的需求,本文详细介绍了Vue.js中实现动态表单的创建,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-12-12
Vue过滤器filters用于一些常见的文本格式化,通过过滤器可以进行处理成自己想要展示出来的格式,由“管道”符号指示,本文给大家介绍Vue过滤器filters使用方式,感兴趣的朋友一起看看吧2023-10-10
最新评论