小程序实现数据双向绑定
因为前端用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.user
user=e.detail.value //对象的属性名称是动态判定时，通过方括号标记访问
this.setData({
user
})
},
页:
[1]