Vue實(shí)現(xiàn)菜單切換功能
更新時(shí)間：2020年11月08日 09:55:48 作者：花落(→)凋謝
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)菜單切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了VUE實(shí)現(xiàn)菜單內(nèi)容切換功能，供大家參考，具體內(nèi)容如下
完整代碼
<!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 //第一個(gè)為默認(rèn)
}
})
</script>
</html>
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
通用vue組件化展示列表數(shù)據(jù)實(shí)例詳解
組件化開發(fā)能大幅提高應(yīng)用的開發(fā)效率、測試性、復(fù)用性等,下面這篇文章主要給大家介紹了關(guān)于通用vue組件化展示列表數(shù)據(jù)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在Vue中一般很少會(huì)用到直接操作DOM，但不可避免有時(shí)候需要用到，這時(shí)我們可以通過ref和$refs這兩個(gè)來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3中$refs的基本使用方法,需要的朋友可以參考下2022-03-03
詳解vue-cli項(xiàng)目開發(fā)/生產(chǎn)環(huán)境代理實(shí)現(xiàn)跨域請求
這篇文章主要介紹了詳解vue-cli項(xiàng)目開發(fā)/生產(chǎn)環(huán)境代理實(shí)現(xiàn)跨域請求，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
這篇文章主要為大家詳細(xì)介紹了Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面，具有很好的參考價(jià)值，希望對大家有所幫助。2022-10-10
Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目完整步驟
最近做項(xiàng)目結(jié)構(gòu)優(yōu)化,前端項(xiàng)目都是部署在nginx上,想實(shí)現(xiàn)同一個(gè)端口可以訪問多個(gè)前端項(xiàng)目,所以就有了本文,這篇文章主要給大家介紹了關(guān)于Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)
這篇文章主要介紹了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用的歷奇經(jīng)歷,總結(jié)分析了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁面應(yīng)用遇到的問題與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03