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