小程序实现表单动态数据双向绑定
- view
- html
- js
view
效果是输入表单内容，在名片上实时显示。
html
这里选择三个属性作为例子：
view class="topLeft" view{{userTop.company}}/view view{{userTop.name}}/view view{{userTop.position}}/view/view view class="section" view姓名/view input name="name" bindinput="bindInput" data-item="name" placeholder="请输入姓名" placeholder-style="color:#ccc;" value="{{user.name}}" / /view view class="section" view公司/view input name="company" bindinput="bindInput" data-item="company" placeholder="请输入公司名称" placeholder-style="color:#ccc;" value="{{user.company}}"//viewview class="section" view职务/view input name="position" bindinput="bindInput" data-item="position" placeholder="请输入职务名称" placeholder-style="color:#ccc;" value="{{user.position}}"//viewjs
data: { //表单数据 user:{ name:"", phone:"", email:"", company: "", position: "", region: [], intro:"" }, //显示数据 userTop:{ name:"姓名", phone:"电话", email:"邮箱", company: "公司名称", position: "职位名称", region: [], }, }, bindInput: function(e){ let item=e.currentTarget.dataset.item; //在每个input绑定不同的item作为标识 const userTop=this.data.userTop userTop[item]=e.detail.value //对象的属性名称是动态判定时，通过方括号标记访问 this.setData({ userTop }) }
