小程序实现数据双向绑定

最新推荐文章于 2024-08-06 15:09:08 发布

借我丹青妙笔

最新推荐文章于 2024-08-06 15:09:08 发布

阅读量3.3k

点赞数 6

分类专栏：小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/Jieur/article/details/122427905

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为前端用vue习惯了，vue中有很多特性让开发变得十分方便。如v-mode实现数据的双向绑定。虽然小程序中没有自带的数据双向绑定，但利用bindinput、bindchange也能实现数据双向绑定。

案例：

效果展示：

输入值前
在这里插入图片描述
输入值后

源码

wxml

<view>
    <form>
    <view>
        <label>用户名：{{user.uname}}</label>
        <input name="uname"
        bindinput="bindInput" 
        type="text" placeholder="请输入用户名" 
        data-item="uname"
       />
    </view>
    <view>
        <label>年龄：{{user.age}}</label>
        <input type="text" placeholder="请输入年龄"  bindinput="bindInput"  data-item="age"  />
    </view>
    <view>
        <label>性别：{{user.sex}}</label>
       <radio-group bind data-item="sex" bindchange="bindInput">
        <radio value="男">男</radio>
        <radio value="女">女</radio>
       </radio-group>
    </view>
   
    
    <view>
        <button form-type="submit" type="primary">提交</button>
    </view>
  
    </form>


</view>

data: {
    user:{
        uname:'',
        age:'',
        sex:''
    }
  },

  bindInput: function(e){

    let item=e.currentTarget.dataset.item; //在每个input绑定不同的item作为标识
    const user=this.data.user
    user[item]=e.detail.value //对象的属性名称是动态判定时，通过方括号标记访问
    this.setData({
      user
    })
  },