vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
更新時(shí)間：2017年05月23日 14:02:11 作者：h5css3_linhuai
這篇文章主要介紹了vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼,需要的朋友可以參考下
廢話不多說(shuō)了，直接給大家貼代碼了，
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue點(diǎn)擊切換顯示隱藏</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
}
ul{
width: 200px;
height: auto;
}
h2{
background: green;
border: 1px solid #fff;
color: #fff;
height: 30px;
line-height: 30px;
text-indent: 24px;
}
h3{
background: #999;
height: 24px;
line-height: 24px;
border: 1px solid #fff;
text-indent: 50px;
}
</style>
</head>
<body>
<div id="example">
<ul>
<li v-for="item in items">
<h2 @click="showToggle(item)">{{item.name}}</h2>
<ul v-show="item.isSubShow">
<li v-for="subItem in item.subItems">
<h3>{{subItem.name}}</h3>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#example",
data:{
items:[
{
name:'家用電器',
isSubShow:false,
subItems:[
{
name:'筆記本電腦'
},
{
name:'臺(tái)式電腦'
},
{
name:'電視機(jī)'
}
]
},
{
name:'服裝',
isSubShow:false,
subItems:[
{
name:'男士服裝'
},
{
name:'女士服裝'
},
{
name:'青年服裝'
}
]
}
]
},
methods:{
showToggle:function(item){
item.isSubShow = !item.isSubShow
}
}
})
</script>
</body>
</html>
以上所述是小編給大家介紹的vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue-router的導(dǎo)航守衛(wèi)使用最新講解
這篇文章主要介紹了vue-router的導(dǎo)航守衛(wèi)使用講解,vue-router提供了許多編程式導(dǎo)航的API，其中最常見(jiàn)的導(dǎo)航API有很多種，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來(lái)通過(guò)本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章介紹了Vue使用$set和$delete操作對(duì)象屬性的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
el-menu如何根據(jù)多層樹(shù)形結(jié)構(gòu)遞歸遍歷展示菜單欄
這篇文章主要介紹了el-menu根據(jù)多層樹(shù)形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
這篇文章主要介為大家詳細(xì)紹了vue實(shí)現(xiàn)微信分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過(guò)實(shí)例代碼介紹了父頁(yè)面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
對(duì)vue里函數(shù)的調(diào)用順序介紹
下面小編就為大家分享一篇對(duì)vue里函數(shù)的調(diào)用順序介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue @click.stop阻止事件向祖先元素傳遞方式(事件冒泡)
在Vue中,使用@click.stop修飾符可以阻止事件向父級(jí)元素傳遞,從而實(shí)現(xiàn)單擊父級(jí)元素執(zhí)行函數(shù),而單擊子元素不執(zhí)行函數(shù)的需求2025-02-02
Vue3?基礎(chǔ)概念與環(huán)境搭建過(guò)程詳解
本文介紹了Vue3的基礎(chǔ)概念,包括響應(yīng)式系統(tǒng)、組合式API和更好的TypeScript支持,同時(shí),文章手把手教你如何搭建Vue3開(kāi)發(fā)環(huán)境,使用Vite創(chuàng)建項(xiàng)目,并解析了項(xiàng)目的結(jié)構(gòu),通過(guò)這些內(nèi)容,讀者可以快速上手Vue3,并為后續(xù)的學(xué)習(xí)打下堅(jiān)實(shí)的基礎(chǔ),感興趣的朋友一起看看吧2025-02-02