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();
}

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

vue中数据添加完成以后,数据回显的更多相关文章

  1. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  2. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  3. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  4. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  5. Vue中实现与后台的数据交换(vue-resource)

    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...

  6. vue中请求本地的json数据

    为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...

  7. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

  8. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  9. Vue中动态添加多个class

    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 先看一下示例: ...

  10. vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法

    data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...

随机推荐

  1. 一入OI深似海 2 —— 初中三年,颓废PJ

    初中,OI似乎没有真正进入我的生活. 三年PJ在我的生活中占比很少. 每天都是平淡无奇的文化课,晚上在写完作业之后还能休息一会儿. 每周六下午的OI课很短暂, 大部分时间我还是把我的重心放在学习上. ...

  2. (五)jdk8学习心得之默认方法

    五.默认方法 1. 使用方法:写在接口中,就是为了接口可以做一些事情. 2. 目的:有很多实现类,有一个公共的抽象方法,其实这些实现类实现该抽象方法的内容是完全一致的,完全没有必要都重新实现一遍.并且 ...

  3. XML fragments parsed from previous mappers already contains value for xxxxx

    错误信息: Caused by: org.springframework.core.NestedIOException: Failed to parse mapping resource: 'file ...

  4. XXXX is not in the sudoers file. This incident will be reported解决方法

    假设你用的是Red Hat系列(包括Fedora和CentOS)的Linux系统.当你执行sudo命令时可能会提示“某某用户 is not in the sudoers file.  This inc ...

  5. windows常用快捷键和指令

    快捷键: Ctrl+鼠标滚轮:更改图标大小(桌面).缩放(开始屏幕) Ctrl+A:选择所有 Ctrl+C:复制 Ctrl+E:选择搜索框(资源管理器) Ctrl+N:新窗口(资源管理器) Ctrl+ ...

  6. g.DrawImage图片合成在本机可以,在服务器一直报内存不够

    g.DrawImage图片合成在本机可以,在服务器一直报内存不够,发现是这个要设为false

  7. Android数据库优化

    1.索引 简单的说,索引就像书本的目录,目录可以快速找到所在页数,数据库中索引可以帮助快速找到数据,而不用全表扫描,合适的索引可以大大提高数据库查询的效率.(1). 优点大大加快了数据库检索的速度,包 ...

  8. 怎么用MATLAB产生FPGA所需的hamming窗系数

    需求 在FPGA处理中如果需要对待处理数据加窗,则需要窗系数存储在ROM中以供使用. 前言 MATLAB窗函数说明 流程 比如加个hamming窗,8192点,16bit放大,最终系数18bit位宽. ...

  9. 如何规避“Flash中国特供版”

    如何规避“Flash中国特供版” 来源  http://blog.sina.com.cn/s/blog_4e1bc3e90102xn0k.html 浏览国内网站,尤其是一些很重要或者很常用,但是很落后 ...

  10. Re.常系数齐次递推

    前言 嗯   我之前的不知道多少天看这个的时候到底在干什么呢 为什么那么..  可能大佬们太强的缘故 最后仔细想想思路那么的emmm 不说了  要落泪了 唔唔唔 前置 多项式求逆 多项式除法/取模 常 ...