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)教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue 解決數組賦值無法渲染在頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了如何利用vite快速搭建vue3項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
組件化開發(fā)能大幅提高應用的開發(fā)效率、測試性、復用性等,下面這篇文章主要給大家介紹了關于通用vue組件化展示列表數據的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-06-06
在Vue中一般很少會用到直接操作DOM，但不可避免有時候需要用到，這時我們可以通過ref和$refs這兩個來實現,下面這篇文章主要給大家介紹了關于vue3中$refs的基本使用方法,需要的朋友可以參考下2022-03-03
詳解vue-cli項目開發(fā)/生產環(huán)境代理實現跨域請求
這篇文章主要介紹了詳解vue-cli項目開發(fā)/生產環(huán)境代理實現跨域請求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Springboot+Vue-Cropper實現頭像剪切上傳效果
這篇文章主要為大家詳細介紹了Springboot+Vue-Cropper實現頭像剪切上傳效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue如何實現路由跳轉到外部鏈接界面，具有很好的參考價值，希望對大家有所幫助。2022-10-10
最近做項目結構優(yōu)化,前端項目都是部署在nginx上,想實現同一個端口可以訪問多個前端項目,所以就有了本文,這篇文章主要給大家介紹了關于Nginx同一端口部署多個前后端分離的vue項目的相關資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue input標簽通用指令校驗的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue-cli3.0實現一個多頁面應用的歷奇經歷,總結分析了vue-cli3.0實現一個多頁面應用遇到的問題與相關操作注意事項,需要的朋友可以參考下2020-03-03