vue實現(xiàn)三級導航展示和隱藏
更新時間:2021年08月31日 17:27:25 作者:吳小花的博客
這篇文章主要為大家詳細介紹了vue實現(xiàn)三級導航展示和隱藏,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)三級導航展示和隱藏的具體代碼,供大家參考,具體內容如下
需求描述:
要實現(xiàn)側邊欄三級導航的顯示和隱藏。點擊其中一個一級導航,展示該一級導航的二級導航,再點擊關閉該二級導航。一級導航的其他項,展開二級導航。關閉其他一級導航的二級導航。
效果如下:
代碼:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" /> <div class="first" v-for="(item, key) in navLists" :key="key"> <li> <span @click="handleClick(key)"> {{ item.title }}</span> <div v-for="(item2, key2) in item.child" :key="key2" class="second" v-show="show2 && currIndex == key" > <p @click="secondClick(key2)">{{ item2.subTitle }}</p> <div v-for="(item3, key3) in item2.threeChild" :key="key3" class="three" v-show="show3 && currIndex2 == key2" > {{ item3.threeTitle }} </div> </div> </li> </div> </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld, }, data() { return { i: 0, show3: false, show2: false, navLists: [ { title: "項目信息", child: [ { subTitle: "項目簡介", esubTitle: "#projectIntroduction", threeChild: [ { threeTitle: "三級導航" }, { threeTitle: "三級導航" }, { threeTitle: "三級導航" }, ], }, { subTitle: "樣品信息", threeChild: [ { threeTitle: "三級導航22" }, { threeTitle: "三級導航22" }, { threeTitle: "三級導航22" }, ], }, { subTitle: "樣品信息", threeChild: [ { threeTitle: "三級導航33" }, { threeTitle: "三級導航33" }, { threeTitle: "三級導航33" }, ], }, ], }, { title: "項目信息2", child: [ { subTitle: "項目簡介22", threeChild: [ { threeTitle: "三級導航44" }, { threeTitle: "三級導44" }, { threeTitle: "三級導航22" }, ], }, { subTitle: "樣品信息22", }, ], }, { title: "項目信息3", eTitle: "#projectMessage", child: [ { subTitle: "項目簡介33", esubTitle: "#projectIntroduction", }, { subTitle: "樣品信息33", esubTitle: "#sampleInformation", }, ], }, { title: "項目信息2", child: [ { subTitle: "項目簡介22", }, { subTitle: "樣品信息22", }, ], }, { title: "項目信息3", child: [ { subTitle: "項目簡介33", }, { subTitle: "樣品信息33", }, ], }, ], currIndex: "", //當前索引 spanIndex: [], //索引數(shù)組 arrIndex: "", //用于判斷是否做索引數(shù)組找到當前索引。-1為找不到,0找到了。 currIndex2: "", //二級導航當前索引 spanIndex2: [], //索引數(shù)組 arrIndex2: "", //用于判斷是否做索引數(shù)組找到當前索引。-1為找不到,0找到了。 }; }, methods: { handleClick(index) { // 初始化三級導航,默認不顯示。 this.show3 =false; this.spanIndex2.splice(-1, 1); // 當前索引=index this.currIndex = index; console.log("當前索引index", index); // 判斷當前索引是否在索引數(shù)組spanIndex中。arrIndex的值只有兩種結果,-1未找到。0找到了。 this.arrIndex = this.spanIndex.indexOf(index); console.log("arrIndex", this.arrIndex); if (this.arrIndex == 0) { //arrIndex ==0,找到索引了,在索引數(shù)組spanIndex刪除該索引,隱藏二級導航。 this.spanIndex.splice(this.arrIndex, 1); this.show2 = false; } else { // arrIndex ==-1,沒有找到,splice(-1,1)從spanIndex數(shù)組結尾處刪除1個值,并將當前索引添加到索引數(shù)組spanIndex,show2為true,展示二級導航, this.spanIndex.splice(this.arrIndex, 1); this.spanIndex.push(index); this.show2 = true; } console.log("索引數(shù)組", this.spanIndex); }, secondClick(index) { console.log(index); // 當前索引=index this.currIndex2 = index; // 判斷當前索引是否在索引數(shù)組spanIndex中。arrIndex的值只有兩種結果,-1未找到。0找到了。 this.arrIndex2 = this.spanIndex2.indexOf(index); console.log("arrIndex2", this.arrIndex2); if (this.arrIndex2 == 0) { //arrIndex ==0,找到索引了,在索引數(shù)組spanIndex刪除該索引,隱藏二級導航。 this.spanIndex2.splice(this.arrIndex2, 1); this.show3 = false; } else { // arrIndex ==-1,沒有找到,splice(-1,1)從spanIndex數(shù)組結尾處刪除1個值,并將當前索引添加到索引數(shù)組spanIndex,show2為true,展示二級導航, this.spanIndex2.splice(this.arrIndex2, 1); this.spanIndex2.push(index); this.show3 = true; } console.log("索引數(shù)組2", this.spanIndex2); }, }, }; </script> <style> p { padding: 5px 0; margin-block-start: 0; margin-block-end: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .first { width: 200px; font-size: 24px; font-weight: bold; /* height: 60px; */ /* background:red; */ } .first:hover { cursor: pointer; /* color:red; */ } .second { font-size: 18px; font-weight: normal; background: #eee; margin-left: 50px; } .three { background: yellow; margin-left: 20px; font-size: 14px; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)el-menu與el-tabs聯(lián)動的項目實踐
本文講述了如何使用Vue.js中的ElementUI組件庫實現(xiàn)el-menu與el-tabs的聯(lián)動,通過在el-menu中選擇菜單項,可以切換el-tabs的內容區(qū)域,具有一定的參考價值,感興趣的可以了解一下2023-11-11vue實現(xiàn)手機號碼的校驗實例代碼(防抖函數(shù)的應用場景)
這篇文章主要給大家介紹了關于vue實現(xiàn)手機號碼的校驗的相關資料,主要是防抖函數(shù)的應用場景,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-09-09vue.js 1.x與2.0中js實時監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關資料,文中介紹的非常詳細,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03