集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web前端培训多少钱?Vue动态绑定v-model

发布者: 成都达内     浏览次数:     发布时间:2020-08-26 14:17:03

在此,需要说明的是一般前端需要的字段为key和label,label用来展示,告诉用户这个是什么,作说明用。后端一般需要key和value,key是字段名,不过一般中文做字段名怪怪的(在某些环境下...

  现在很多输入框是通过前端写死固定字段,如果这些字段是后端生成的呢?通过后端返回字段,形如

  {

  key:'input1',

  label:'输入框1'

  },{

  key:'input2',

  label:'输入框2'

  }

  然后根据键值对的数量动态渲染出相对应的input框,这样表单如果有新的字段添加的话前端就可以不用修改代码了。

  template

  h2测试页面/h2

  {{item.label}}:

  /div

  /template

  script

  export default {

  data(){

  return{

  inputList:[{

  key:'input1',

  label:'输入框1',

  value:''

  },{

  key:'input2',

  label:'输入框2',

  value:''

  },{

  key:'input3',

  label:'输入框3',

  value:''

  },{

  key:'input4',

  label:'输入框4',

  value:''

  },{

  key:'input5',

  label:'输入框5',

  value:''

  }]

  }

  },

  mounted() {

  this.$axios.get("/XX/XXXX").then(data => {

  this.inputList = data;

  });

  },

  }

  /script

  在此,需要说明的是一般前端需要的字段为key和label,label用来展示,告诉用户这个是什么,作说明用。后端一般需要key和value,key是字段名,不过一般中文做字段名怪怪的(在某些环境下使用可能会出bug,从通用性考虑一般使用英文)。anyway,如果不介意,只需要把label的值作key,再加上value这两个属性就够了。

  总而言之,这三个字段够我们使用了,如果渲染前的请求后端不想发value字段,毕竟这个是为了填值用的,基本都是空值,这样就可以获取list之后forEach()来循环赋值一个空的value。当然,如果这些input框有需要后端返回的默认值除外。同理,在发请求送给后端的时候如果后端不需要label字段(不要嫌麻烦,一切都是为了规范,不用的字段不送),组报文的时候forEach()+delete处理掉就行了。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56