正文

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

IP云
IP云V管理员/6 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.格式 

  <FormItem label="奖品领取类型：" prop="getType" >

                         <RadioGroup v-model="formValidate.getType" @on-change="showP">

                             <Radio :label="1">不推荐</Radio>

                             <Radio :label="2">推荐</Radio>

                         </RadioGroup>

                     </FormItem>

                     <FormItem label="推荐人数：" prop="getNum" v-show="showPepo" >

                         <AutoComplete

                                 v-model="formValidate.getNum"

                                 :clearable=true

                                 style="width:400px">

                         </AutoComplete>

                     </FormItem>

2.执行 

  //显示回显，单选框中选中值，直接显示出下拉框中的值

             showP(){

                 if(this.formValidate.getType == 1){

                     this.showPepo = false;

                 }else if(this.formValidate.getType == 2){

                     this.showPepo= true;

                 }

             },

3.判断一次 

  //显示回显，单选框中选中值，直接显示出下拉框中的值及判断

             handleRadio_coupon() {

                 if (this.formValidate.prizeType == 1) {

                     this.showCdk = true;

                     this.showCoupon = false;

                     this.showCoupons = false;

                     this.showP();

                 } else if (this.formValidate.prizeType == 2) {

                     this.showCdk = false;

                     this.showCoupon = true;

                     this.showCoupons = false;

                     this.showP();

                 }

4.页面加载执行方法 

   mounted () {

             this.getCdks();

             this.getCoupons();

             this.init();

             this.showP();

         }

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

添加

1.如图

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

2.页面红框处代码 

  <FormItem label="奖品领取类型：" prop="getType" >

                         <RadioGroup v-model="formValidate.getType" @on-change="showP">

                             <Radio label="1">不推荐</Radio>

                             <Radio label="2">推荐</Radio>

                         </RadioGroup>

                     </FormItem>

                     <FormItem label="推荐人数：" prop="getNum" v-show="showPepo" >

                         <AutoComplete

                                 v-model="formValidate.getNum"

                                 :clearable=true

                                 style="width:400px">

                         </AutoComplete>

                     </FormItem>

3.判断 

  showP(){

                 if(this.formValidate.getType == 1){

                     this.showPepo = false;

                 }else if(this.formValidate.getType == 2){

                     this.showPepo= true;

                 }

             },

4.页面初始化调用方法 

    mounted () {

             this.init();

             this.handleRadio_coupon();

             this.showP();

      }

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

相关阅读

目录[+]