<van-field>使用方案
1.官方示例<van-cell-group><van-fieldvalue="{{ value }}"placeholder="请输入用户名"border="{{ false }}"bind:change="onChange"/></van-cell-group>Page({data: {value: '',},onChange(event) {// event
·
1.官方示例
<van-cell-group>
<van-field
value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
bind:change="onChange"
/>
</van-cell-group>
Page({
data: {
value: '',
},
onChange(event) {
// event.detail 为当前输入的值
console.log(event.detail);
},
});
可以看到对于输入框中数据的改变,是通过一个监听函数 bind:change=“onChange"实现的,那么value=”{{ value }}"有没有进行相对应的数据绑定呢???没有
笔者认为应当在监听函数中加上一句this.data. value= event.detail,这样data和页面还有输入框三者之前的数据就绑定在了一起
注册案例
<van-cell-group>
<van-field
bind:change="onChangeUsername"
required
clearable
label="用户名"
placeholder="请输入用户名"
/>
<van-field
bind:change="onChangePwd"
required
clearable
type="password"
label="密码"
placeholder="请输入密码"
/>
</van-cell-group>
<van-button bindtap="register" type="primary">主要按钮</van-button>
data: {
username:"",
password:""
},
onChangeUsername(event) {
//监听用户名输出并同步到username中
this.data.username = event.detail
},
onChangePwd(event){
//监听密码输入并同步到pwd中
this.data.password = event.detail
},
register(){
//监听按钮点击事件
let username=this.data.username
let pwd=this.data.password;
console.log(username+"=="+pwd)
}
更多推荐
已为社区贡献1条内容
所有评论(0)