100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 小程序实现数据双向绑定

小程序实现数据双向绑定

时间:2023-01-23 18:04:30

相关推荐

小程序实现数据双向绑定

因为前端用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>

js

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

OK,是不是很简单。

声明:最近在学习SpringBoot的内容,之后会整理一篇SpringBoot的博客。学习记录,欢迎留言讨论。

推荐一个优质博主:代码世界里的小李

作者:借我丹青妙笔

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。