使用vue2.0.js实现多级联动选择器

<template>
 <p id="app">
 <p class="select">
 <p class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></p>
 <p class="options1" v-show="options1isShow">
 <ul>
 <li v-on:click="toClick(option.value)" v-for="option in options">{{option.label}}</li>
 </ul>
 </p>
 <p class="options2" v-show="options2isShow">
 <ul >
 <li v-for="item in secondOptions" v-on:click="selectResult(item.label,item.value)">{{item.label}}</li>
 </ul>
 </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'app',
 data(){
 return {
 options:[
 {
 value:'zhinan',
 label:'指南',
 children:[
 {
 value: 'yizhi',
 label: '一致'
 }, {
 value: 'fankui',
 label: '反馈'
 }, {
 value: 'xiaolv',
 label: '效率'
 }, {
 value: 'kekong',
 label: '可控'
 }
 ]
 },
 {
 value: 'daohang',
 label: '导航',
 children: [{
 value: 'cexiangdaohang',
 label: '侧向导航'
 }, 
 {
 value: 'dingbudaohang',
 label: '顶部导航'
 }]
 }
 ],
 secondOptions:[],
 options1isShow:false,
 options2isShow:false,
 result:''
 }
 },
 methods:{
 options1Show:function(){
 this.options1isShow=true;
 },
 toClick:function(item){
 this.secondOptions=[];
 for(var i=0;i<this.options.length;i++){
 if(this.options[i].value==item){
 console.log(this.options[i].children);
 this.secondOptions=this.options[i].children;
 console.log(this.secondOptions);
 }
 }
 this.options2isShow=true;
 },
 selectResult:function(label){
 this.result=label;
 this.options1isShow=false;
 this.options2isShow=false;
 }
 }
}
</script>
<style>
li,ul{
 list-style: none;
 padding:0;
 margin:0;
}
li{
 height:40px;
 line-height: 40px;
 border-bottom: 1px solid #ededed;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;
}
.select{
 position: relative;
}
.input_text>input{
 width:170px;
 height:30px;
 border:1px solid #ddd;
}
.options1,.options2{
 width:170px;
 height:200px;
 border:1px solid #ddd;
 position: absolute;
 background: #fff;
 overflow-y: auto;
}
.options2{
 left:170px;
}
</style>