小程序实现表单动态数据双向绑定

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}}"/>
</view>
<view class="section">
        <view>职务</view>
        <input name="position" bindinput="bindInput" data-item="position"  placeholder="请输入职务名称" placeholder-style="color:#ccc;" value="{{user.position}}"/>
</view>

js

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