HTML代码 
    
         
     
             
      
                 
       ×                 
       
选择信息
             
      
                 
      
                     
          //:value可以设置上value 一定要写： onselect可以将选择的value获取 绑定一个v-model通过watch监视值得改变                         请选择科室                                                      {
  {clinic.clName}}                                                                       
                                    请选医生                                                              {
  {doctor.doName}}                                                           
       
         
        关闭         
        确定     
       
                 
      
         
     
     
      //模糊查询 绑定属性通过watch来监视input里得值变化     
     
               
                
        
             
       
       
                         
ID
                         
姓名
                         
年龄
                         
性别
                         
医生姓名
                         
科室
                         
时间
                         
操作
                    
                        
               
                
                     
{
  {guahao.id}}
                     
{
  {guahao.guaName}}
                     
{
  {guahao.guaAge}}
                     
{
  {guahao.guaSex}}
                     
{
  {guahao.doctorEntity.doName}}
                     
{
  {guahao.clinicEntity.clName}}
                     
{
  {guahao.guaTime}}
                     
                 修改              
                
                
        
无信息
                
      
          
 
    
 JS代码：

var vm = new Vue({
      el: "#box",     data: {
          guahao:"",         clinics: [],         doctors: [],         clselected: "",         doselected:"",         you: false,         doname: false,         input_value: "",         entities: [{
              id: "",             guaName: "",             guaAge: "",             guaSex: "",             doctorEntity: [{doName: ""}],             clinicEntity: [{clName: ""}],             guaTime: ""         }]     },     watch: {
          input_value: function (data) {
              if(typeof data==='string')                 if(data.trim().length!==0){
                      this.search(data)                 }         },         clselected: function (data) {
              this.change(data)         }     },     methods: {
          search: function (resdata) {
              var that = this;  //作用域不同要写that             var guaName = resdata;             $.ajax({
                  url: "findbyname.action",                 data: {name: guaName},                 dataType: "json",                 type: "post",                 success: function (res) {
                      console.log(res.guahaodanEntities);                     if (res.guahaodanEntities.length == 0) {
                          that.$data.you = false;                     } else {
                          that.$data.you = true;                         that.$data.entities = res.guahaodanEntities;                     }                 },                 error: function () {
                      alert("zzzz")                 }             })         },         modify: function (guahao) {
              console.log(guahao);             var that = this;             this.guahao = guahao;             $.ajax({
                  url: "findclinic.action",                 data: {},                 dataType: 'json',                 error: function (e) {
                      alert("1111")                     console.log(e)                 },                 success: function (data) {
                      console.log(data);                     data = data.clinicEntities;                     that.$data.clinics = data;                 },                 type: 'POST'             });         },         change: function (selected) {
              console.log(selected);             this.$data.doname = true;             var that = this;             $.ajax({
                  url: "modfd.action",                 data: {"findclinicID": selected},                 dataType: 'json',                 error: function (e) {
                      alert("1111")                     console.log(e)                 },                 success: function (data) {
                      console.log(data);                     data = data.doctorEntities;                     that.$data.doctors = data;                 },                 type: 'POST'             });         },         saved:function () {
              var that = this;             console.log(this.clselected);             console.log(this.doselected);             $.ajax({
                  url: "modghd2.action",                 data: {
                      "guahaodanEntity.id":that.$data.guahao.id,                     "clinicEntity.clId":that.$data.clselected,                     "doctorEntity.doId":that.$data.doselected                 },                 dataType: 'json',                 error: function (e) {
                      alert("1111");                     console.log(e)                 },                 success: function (data) {
                      console.log(data)                     that.guahao.doctorEntity.doName=data.doctorEntity.doName;                     that.guahao.clinicEntity.clName=data.clinicEntity.clName;                 },                 type: 'POST'             });         }     } })