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>
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
