溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關利用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制作一個菜單切換功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
