文章详情
本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
- vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
- 可能是全网vue v-model最详细讲解教程
- Vue3中echarts无法缩放的问题及解决方案
- Vue $nextTick 为什么能获取到最新Dom源码解析
- Vue生命周期实例分析总结
- Vue实现简单基础的图片裁剪功能
- vue.config.js 的完整配置（超详细）
- vue原生input输入框原理剖析
版权：版权申明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 70068002@qq.com 举报，一经查实，本站将立刻删除。
转载请注明出处：https://www.stntk.com/2481.html
相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求，是要在现有的表格中实现类似 Excel 中的数据条的效果，在数据比较多的时候单纯看表格里的数字会比…
js 实现汉字简体和繁体之间的互相转换
简体字 简体字（Simplified Chinese，简体中文），是中国大陆地区目前在用的字体，由官方公布的简体字，主要由传承字以及1950…
如何使用nginx配置代理多个前端资源？
背景 两套不同的前端使用同一个后端服务，前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢？ 1、HTML代码 <ul class="list-group"> …
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
前端如何实现网页变灰功能？
今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！ 实现思路 先来看看一些主流网站是如何实现置灰的： BiliBili： 京东 …
还没有评论呢，快来抢沙发~