欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue二級菜單導(dǎo)航點(diǎn)擊選中事件的方法

 更新時間：2018年09月12日 09:02:17   作者：天空影  
今天小編就為大家分享一篇vue二級菜單導(dǎo)航點(diǎn)擊選中事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

因?yàn)闆]有使用vue做一個真正完整的項(xiàng)目，所以乘著這個項(xiàng)目比較閑的時間，對標(biāo)項(xiàng)目用vue做一些頁面，豐富自己的項(xiàng)目經(jīng)驗(yàn)。所以接下來基本都是一些簡單的功能。

目標(biāo)：一級導(dǎo)航點(diǎn)擊收縮展開，二級導(dǎo)航點(diǎn)擊選中

源碼 主要是思路，具體的就不放了

<ul class="sidebar-menu">
 <li class="treeNav" v-for="(item,index) in configNav">
  <a href="javascript:void(0)" rel="external nofollow" @click="showToggle(index)">{{item.name}}</a>
  <ul :class="{'active' :index===isShow}">
   <li v-for = "nav in item.subItems">
    <a :href="nav.link" rel="external nofollow" 
    :class="{'active':nav.link == linkClick}"
    @click = "treeNavSwitch(nav)">
    {{nav.text}}</a>
   </li>
  </ul>
 </li>    
</ul>

<script>
 export default {
  data () {
   return {    
    isShow:0,
    linkClick:'',
    configNav:[
     { 
      name:'交換&路由',
      subItems:[
       { link:'#/callSource',text: '呼叫源',click:true },
       { link:'#/cancld',text: '號碼分析' },
       { link:'#/route',text: '出局路由' }
      ]
     },
     { 
      name:'組織&資源',
      subItems:[
       { link:'#/org',text: '組織' },
       { link:'#/term',text: '終端' },
      ]
     }     
    ]   
   }
  },
  methods:{
   showToggle:function(index){ 
    this.isShow = index; 
   },
   treeNavSwitch:function(nav){
    this.linkClick = nav.link;
   }
  }
 }
</script>

以上這篇vue二級菜單導(dǎo)航點(diǎn)擊選中事件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue內(nèi)置組件keep-alive事件動態(tài)緩存實(shí)例

    vue內(nèi)置組件keep-alive事件動態(tài)緩存實(shí)例

    這篇文章主要介紹了vue內(nèi)置組件keep-alive事件動態(tài)緩存實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue在取對象長度length時候出現(xiàn)undefined的解決

    vue在取對象長度length時候出現(xiàn)undefined的解決

    這篇文章主要介紹了vue在取對象長度length時候出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • 用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法

    用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法

    這篇文章主要介紹了用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式

    Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式

    這篇文章主要介紹了Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • Vuex簡單入門

    Vuex簡單入門

    本篇文章主要介紹了初步認(rèn)識理解Vuex，Vuex就是在一個項(xiàng)目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下
    2017-04-04
  • Vue動態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)

    Vue動態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)

    這篇文章主要介紹了Vue動態(tài)擴(kuò)展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • 在vue中使用export?default導(dǎo)出的class類方式

    在vue中使用export?default導(dǎo)出的class類方式

    這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • vue計算屬性和監(jiān)聽器實(shí)例解析

    vue計算屬性和監(jiān)聽器實(shí)例解析

    本文通過基本實(shí)例給大家介紹了vue計算屬性和監(jiān)聽器的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-05-05
  • 通過html文件來使用Vue的單文件組件形式詳解

    通過html文件來使用Vue的單文件組件形式詳解

    這篇文章主要介紹了通過html文件來使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-05-05
  • Vue滾動到指定位置的多種方式示例詳解

    Vue滾動到指定位置的多種方式示例詳解

    當(dāng)容器有滾動條時,有時需要將指定的內(nèi)容自動滾動到可視區(qū)域,怎么實(shí)現(xiàn)呢,下面小編給大家?guī)砹硕喾N方法實(shí)現(xiàn)Vue滾動到指定位置,感興趣的朋友跟隨小編一起看看吧
    2023-08-08

最新評論