最近项目用到vue.js，研究了半天，用vue写了一个部门大区的二级联动，发现工具真是好用，比以前少了很多代码，记录下来也方便自己以后查阅，下面是代码
<script type="text/javascript"> $(function(){ loadfirst(0); }); function sub(id){ loadfirst(id); } function loadfirst(pid){ $.ajax({ type:"post", url:"testurl.action?pid="+pid, dataType:"json", success:function(data){ //id为0时为父类 if(pid==0){ vm.mcs=data; }else{ vm2.mcs=data; } } }); } </script> </head> <body> <div id="sel" v-cloak> //部门，第一个select框 <select id="dqsel" > <option>-请选择-</option> <option v-for="mc in mcs" v-bind:value="mc.id" @click="sub(mc.id)">{{mc.name}}</option> </select> //大区，第二个select框 <select id="bmsel"> <option>-请选择-</option> <option v-for="mc in mcs" v-bind:value="mc.id">{{mc.name}}</option> </select> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#dqsel', data:{ mcs : [], } }); var vm2 = new Vue({ el:'#bmsel', data:{ mcs : [], } }); </script> //测试类 public class test { private int id; //主键 private String name; //名称 private int pid; //父id,当为0时是顶级父类 public int getId() { return id; } public String getName() { return name; } public int getPid() { return pid; } public void setId(int id) { this.id = id; } public void setName(String name) { this.name = name; } public void setPid(int pid) { this.pid = pid; } }testurl查询的是pid为从页面传过去的值的集合，第一次是0，查询的是所有顶级父类，第二次会根据第一次select框选中的id到后台查询数据库中pid为该id的集合，三级联动以此类推
PS：发现空格和Tap缩进区别好大，习惯用tap缩进，复制到编辑器直接乱。以后要注意
