vUE 折叠菜单

<template>

  <div>

<h1>  {{name}}</h1>

<ul>

<li v-for="(item,i) in items" :key="i">

    <a class="" @click="flagChange(item)">

<i :class="item.icon"></i> {{item.name}}

<b v-show="!item.flag">^</b>

<b v-show="item.flag">！</b>

</a>

<ul class="" v-show="item.flag">

    <li v-for="(sub,j) in item.subItems" :key="j">

<router-link :to="sub.link">{{sub.name}}</router-link>

    </li>

</ul>

</li>

</ul>

  </div>

</template>

<script>

export default {

  data () {

    return {

      name: "i am menu component",

      items:[

{name:"Colth",icon:"fa fa-at",flag:true,

subItems:[

{name:"cloth 1",link:"Form0324"},

{name:"cloth 2",link:"Productlisttwo"},

{name:"cloth 3",link:"Productlistone"}

]},

{name:"Sport",icon:"fa fa-automobile",flag:false,

subItems:[

{name:"Sport 1",link:"Productlistone"},

{name:"Sport 2",link:"Productlistone"},

{name:"Sport3",link:"Productlistone"}

]},

{name:"Trend",icon:"fa fa-bank",flag:false,

subItems:[

{name:"Trend 1",link:"Productlistone"},

{name:"Trend 2",link:"Productlistone"},

{name:"Trend 3",link:"Productlistone"}

]},

      ]}

    },

  computed:{},

  methods:{flagChange:function(item){

item.flag=!item.flag;

this.items.forEach(function(v)

{v.flag=false;}

);

item.flag=true;

  }

  }

}

</script>

<style scoped>

@import "https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css";

ul{background:#e5e6a7}

li{color:rgb(32, 15, 15)}

</style>

最后

以上就是唠叨航空为你收集整理的vUE 折叠菜单的全部内容，希望文章能够帮你解决vUE 折叠菜单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。