制作一个二级菜单，通过二级联动菜单选择类别，当第一个菜单选项改变时，第二个菜单中的选项也会随之改变
head部分： 通过src引入vue.js文件
<head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head>body部分： v-for=“miditem in list” ：遍历list中每一个对象 v-bind:value=“miditem.text” ：绑定miditem.text的值 v-on:change=“gflist” ：监听select，当选项发生改变时，就触发gflist函数
<div id="frame"> <form> <div> <label>四川信息二级联动，信息：</label> <select v-on:change="gflist"> <option v-for="miditem in list" v-bind:value="miditem.text"> {{miditem.text}} </option> </select> <select> <option v-for="list2 in getlist2" v-bind:value="list2.text"> {{list2.text}} </option> </select> </div> </form> </div>Vue事件部分： 函数gflist自定义一个参数event，targe.value将刚才绑定的value值赋予midtext。 computed属性中，定义一个i=0，每次增长1，每次都与midlist对比是否值相同，直到匹配相同，返回此时对比的list对象中的list2的值。
<script> var demo= new Vue({ el:"#frame", data:{ midtext:'四川名山', list:[ { text:'四川名山', list2:[ {text:'青城山'}, {text:'峨眉山'}, {text:'西岭雪山'}, ] }, { text:'四川小吃', list2:[ {text:'宜宾燃面'}, {text:'三大炮'}, {text:'大熊猫'}, ] }, { text:'四川大河', list2:[ {text:'长江'}, {text:'金沙江'}, {text:'岷江'}, ] } ] }, methods:{ gflist(event){ this.midtext = event.target.value; } }, computed:{ getlist2:function(){ for(var i=0;i<this.list.length;i++){ if(this.list[i].text==this.midtext){ return this.list[i].list2; } } } } }) </script>以上为二级联动菜单的全部代码，希望对大家有所帮助，感谢观看！
