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實戰(zhàn)教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
如何優(yōu)雅的在一臺vps（云主機）上面部署vue+mongodb+express項目
這篇文章主要介紹了如何優(yōu)雅的在一臺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
動態(tài)表單是一個常見的需求,本文詳細介紹了Vue.js中實現動態(tài)表單的創(chuàng)建,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10