vue中数据添加完成以后，数据回显

1.格式

 1  
 2                         
 3                             不推荐
 4                             推荐
 5                         
 6                     
 7                     
 8                         <AutoComplete
 9                                 v-model="formValidate.getNum"
10                                 :clearable=true
11                                 style="width:400px">
12                         
13                     

 

 

2.执行

1  //显示回显，单选框中选中值，直接显示出下拉框中的值
2             showP(){
3                 if(this.formValidate.getType == 1){
4                     this.showPepo = false;
5                 }else if(this.formValidate.getType == 2){
6                     this.showPepo= true;
7                 }
8             },

 

3.判断一次

 1  //显示回显，单选框中选中值，直接显示出下拉框中的值及判断
 2             handleRadio_coupon() {
 3                 if (this.formValidate.prizeType == 1) {
 4                     this.showCdk = true;
 5                     this.showCoupon = false;
 6                     this.showCoupons = false;
 7                     this.showP();
 8                 } else if (this.formValidate.prizeType == 2) {
 9                     this.showCdk = false;
10                     this.showCoupon = true;
11                     this.showCoupons = false;
12                     this.showP();
13                 } 

 

4.页面加载执行方法

1   mounted () {
2             this.getCdks();
3             this.getCoupons();
4             this.init();
5             this.showP();
6 
7 
8         }

 

 

5.页面，上面3步骤中的判断意思是，根据下图的1方法判断，只要1执行，那么下图2中的方法判断就是继续执行，如果1不去执行，那么2的方法也不执行，但是下图的1中的数据是动态获取的，这个属于修改的页面

 

 

 

 

 

添加

 

1.如图

 

 

 

 

上图红框处为点击完单选框样式

 

 

2.页面红框处代码

 

 1  
 2                         
 3                             不推荐
 4                             推荐
 5                         
 6                     
 7                     
 8                         <AutoComplete
 9                                 v-model="formValidate.getNum"
10                                 :clearable=true
11                                 style="width:400px">
12                         
13                     

 

3.判断

 

1  showP(){
2                 if(this.formValidate.getType == 1){
3                     this.showPepo = false;
4                 }else if(this.formValidate.getType == 2){
5                     this.showPepo= true;
6                 }
7             },

4.页面初始化调用方法

1    mounted () {
2 
3             this.init();
4             this.handleRadio_coupon();
5             this.showP();
6      }

 

 

坑处太多，主要是在数据绑定那，添加的时候不需要双向绑定，而修改的时候需要双向绑定，就是页面代码中有冒号的地方

转载于:https://www.cnblogs.com/ln0808/p/10729857.html