vue中数据添加完成以后,数据回显
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中数据添加完成以后,数据回显的更多相关文章
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Vue中实现与后台的数据交换(vue-resource)
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...
- vue中请求本地的json数据
为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...
- vue中给请求到的数据对象加属性问题
今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- Vue中动态添加多个class
vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 先看一下示例: ...
- vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法
data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...
随机推荐
- button样式的demo
<style type="text/css"> .styletop{margin-top: 200px;} .stylea{ margin-left:550px;} ; ...
- IntelliJ IDEA2017 激活方法 最新的激活注册方式方法,破解,密钥
IntelliJ IDEA2017 激活方法(亲测可用): 搭建自己的授权服务器,对大佬来说也很简单,我作为菜鸟就不说了,网上有教程. 我主要说第二种,现在,直接写入注册码,是不能成功激活的(如果你成 ...
- mysql-笔记-默认值
1 指定列的默认值 columnName int default '-1' 2 integer 列-设置自增列 也是指定默认值的方式 3 默认值必须是常量 不能使用函数.表达式---特例:timest ...
- js回调地域 和 用promise解决方法
回调地狱: function3({cb3()}){ function2({cb2(cb3)}){ //cb2触发了cb3,并传值 function1({cb1(cb2)}){ //cb1触发了cb2, ...
- 怎么写自己的CMakeLists.txt
一. 为什么要使用cmake 理论上说,任意一个C++程序都可以用g++来编译.但当程序规模越来越大时,一个工程可能有许多个文件夹和源文件,这时输入的编译命令将越来越长.通常一个小型C++项目可能含有 ...
- .Net Core 环境下构建强大且易用的规则引擎
本文源码: https://github.com/jonechenug/ZHS.Nrules.Sample 1. 引言 1.1 为什么需要规则引擎 在业务的早期时代,也许使用硬编码或者逻辑判断就可以满 ...
- [LOJ3088][GXOI/GZOI2019]旧词——树链剖分+线段树
题目链接: [GXOI/GZOI2019]旧词 对于$k=1$的情况,可以参见[LNOI2014]LCA,将询问离线然后从$1$号点开始对这个点到根的路径链修改,每次询问就是对询问点到根路径链查询即可 ...
- loj2977 巧克力 (斯坦纳树+随机化)
考虑颜色比较少的时候,第一问可以直接斯坦纳树 第二问考虑二分,每次把每格的权值给成1000+[a[i]>m],就是在个数最少的基础上尽量选小于等于m的 然而颜色太多不能直接做,但可以把每种颜色映 ...
- 第二篇--PCI设备解析
介绍:参考 一个系统上最多有256个PCI总线,每个总线最多有32个设备,每个设备最多有8个功能,每个功能最多有256字节的配置地址空间,所以总的配置地址空间是16M. PCI设备有物理设备和逻辑设备 ...
- windows类似grep的命令——findstr
windows类似grep的命令——findstr 使用Chrome发现访问google总是向香港那边跳转,估计配置文件中google网站映射的地址是www.google.com.hk,便想着改配 ...