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

1.格式1<FormItem label="奖品领取类型：" prop="getType" >2<RadioGroup v-model="formValidate.getType" @on-change="showP">3<Radio ...

weixin_30685029

6585人浏览 · 2019-04-18 15:23:00

weixin_30685029 · 2019-04-18 15:23:00 发布

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      }

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^