將菜單數(shù)據(jù)渲染到模版上

這里使用v-if和v-for將數(shù)據(jù)渲染到模版上，最多會(huì)有3個(gè)主菜單以及每個(gè)主菜單最多會(huì)有5個(gè)子菜單。

 
 {{weixinTitle}}
 
 
 
 
 
 
  {{ btn.name }}
 
 
  
  
  
  {{sub.name}}
  
  
  
  
  
  
  
  
 
 
 
  
 
 

給vue實(shí)例添加方法

在vue實(shí)例中給methods對(duì)象中添加我們自定義的方法

methods: {
 //選中主菜單
 selectedMenu:function (i) {
 this.selectedSubMenuIndex = ''
 this.selectedMenuIndex = i
 },
 //選中子菜單
 selectedSubMenu:function (i) {
 this.selectedSubMenuIndex = i
 },
 //選中菜單級(jí)別
 selectedMenuLevel: function () {
 if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex === '') {
 //主菜單
 return 1;
 } else if (this.selectedMenuIndex !== '' && this.selectedSubMenuIndex !== '') {
 //子菜單
 return 2;
 } else {
 //未選中任何菜單
 return 0;
 }
 },
 //添加菜單 
 //參數(shù)level為菜單級(jí)別，1為主菜單、2為子菜單
 addMenu:function (level) {
 if (level == 1 && this.menu.button.length < 3) {
 this.menu.button.push({"name": "菜單名稱",
 "sub_button": []
 })
 this.selectedMenuIndex = this.menu.button.length - 1
 this.selectedSubMenuIndex = ''
 }
 if (level == 2 && this.menu.button[this.selectedMenuIndex].sub_button.length < 5) {
 this.menu.button[this.selectedMenuIndex].sub_button.push({
 "name": "子菜單名稱"
 })
 this.selectedSubMenuIndex = this.menu.button[this.selectedMenuIndex].sub_button.length - 1
 }
 }
}

給菜單綁定方法

當(dāng)點(diǎn)擊菜單觸發(fā)selectedMenu方法，點(diǎn)擊添加按鈕觸發(fā)添加addMenu方法。使用v-on來監(jiān)聽事件，它的縮寫是@

監(jiān)聽點(diǎn)擊事件@click ，為了防止子菜單點(diǎn)擊事件冒泡的主菜單，則使用.stop事件修飾符來阻止冒泡@click.stop

使用v-bind:class來添加切換菜單選中時(shí)的class。:class為縮寫

 
 
 
 {{ btn.name }}
 
 
 
 
 
  {{sub.name}}
 
 
 
  
  
  
 
 
 
 
 
 

感謝各位的閱讀！關(guān)于“Vue.js實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！