vue中數據添加完成之後，數據回顯

1.格式

 1  <FormItem label="獎品領取類型：" prop="getType" >
 2                         <RadioGroup v-model="formValidate.getType" @on-change="showP">
 3                             <Radio :label="1">不推薦</Radio>
 4                             <Radio :label="2">推薦</Radio>
 5                         </RadioGroup>
 6                     </FormItem>
 7                     <FormItem label="推薦人數：" prop="getNum" v-show="showPepo" >
 8                         <AutoComplete
 9                                 v-model="formValidate.getNum"
10                                 :clearable=true
11                                 style="width:400px">
12                         </AutoComplete>
13                     </FormItem>

 

 

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  <FormItem label="獎品領取類型：" prop="getType" >
 2                         <RadioGroup v-model="formValidate.getType" @on-change="showP">
 3                             <Radio label="1">不推薦</Radio>
 4                             <Radio label="2">推薦</Radio>
 5                         </RadioGroup>
 6                     </FormItem>
 7                     <FormItem label="推薦人數：" prop="getNum" v-show="showPepo" >
 8                         <AutoComplete
 9                                 v-model="formValidate.getNum"
10                                 :clearable=true
11                                 style="width:400px">
12                         </AutoComplete>
13                     </FormItem>

 

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      }

 

 

坑處太多，主要是在數據綁定那，添加的時候不須要雙向綁定，而修改的時候須要雙向綁定，就是頁面代碼中有冒號的地方