本示例css样式均写在head部分里，可以自行修改为调用外部样式。

设置好需要显示菜单的元素，之后引入关键的javascript插件：

<div id="app">
    <div class="row">
           <div class="col-sm-3">
               <div class="relatedInstance">
                   <h2>vue2.0实现下拉菜单全选和全不选</h2>
                   <ul>
                       <li id="" v-for="(entity,index) in entities" @click="handleTit(index)">
                           <h3>{{entity.text}}<b  :class="{'checked':allState[index]}" @click.stop="handleTitAll(index)"></b></h3>
                           <ul v-show="entitiesState[index]" @click.stop>
                               <li v-for="(list,listIndex) in entity.child" @click="childHandle(listIndex,index)">
                                   <b :class="{'checked':childState[index][listIndex]}"></b><span>{{list.text}}</span>
                               </li>
                           </ul>
                       </li>
                   </ul>

               </div>
           </div>
       </div>
  </div>

<script src="js/vue.min.js"></script>
<script src="js/vue-resource.js"></script>

实例化一个VUE，并配置菜单列表的内容及相关方法：

var newlist = new Vue({
      el:'#app',
      data:{
        entities:[
          {text:'人员组成',child:[{text:'擎天柱'},{text:'大黄蜂'}]},
          {text:'项目分类',child:[{text:'登月计划'},{text:'星际穿越'}]},
          {text:'合作机构',child:[{text:'航空航天局'},{text:'超物质研究院'}]},
        ],
        entitiesState:[],
        childState:[],
        allState:[],
        listLen:0
        },
        watch:{

        },
        methods:{
          handleTit(i){//点击父级
             let state=this.entitiesState;
             this.$set(state,i,!state[i]);
             for(let a in this.entitiesState){
                 if(a!=i){
                     this.$set(state,a,false);
                 }
             }//增加判断，改变同级的展开状态
          },
          childHandle(i,pi){//单选
             let child=this.childState;
             if(child[pi][i]) this.allState[pi]=false;
             this.$set(child[pi],i,!child[pi][i]);
             if(this.childState[pi][i]) this.checkList(this.childState[pi],pi);
          },
          handleTitAll(pi){//全选
             let child=this.childState[pi],
                 allState=this.allState;
             for(let i=0;i<this.listLen;i++){
                this.$set(child,i,!allState[pi]);
             }
             this.$set(allState,pi,!allState[pi]);
          },
          checkList(child,pi){
             let allState=this.allState,
                 len=this.entities[pi].child.length;
             for(let i=0;i<len;i++){
                if(!child[i]) return;
             }
             this.$set(allState,pi,true);
          }
       },
       created(){
          let len=this.entities.length;
          this.listLen=len;
          for(let i=0;i<len;i++){
             this.$set(this.childState,i,[])
          }
       }
    })