1、双向绑定的实现
最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。
<van-cell-group>
<van-field
model:value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
/>
</van-cell-group>
Page({
data: {
value: '',
info:{
value:''
}
},
});
但是在双向绑定的时候，发现有一个层级关系
//双向绑定失效
<van-field
model:value="{{ info.value }}"
placeholder="请输入用户名"
border="{{ false }}"
/>
//双向绑定有效
<van-field
model:value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
/>
2、不允许用户输入，但不能置灰的情况
在用户添加地址，和van-popup、van-area结合使用的时候，点击输入框，弹出选择地址的框，此时发现用户仍然可以输入，我就想到了禁用，但是发现禁用会置灰，给用户一种不可输入的感觉，但是点击的时候发现还是可以弹出弹窗。这时发现可以设置只读属性readonly就达到了自己想要的效果（用户不可以输入，通过点击选择地址）
<van-field model:value="{{ value}}" label="地址" placeholder="请选择服务地址" arrow-direction="left" bind:tap="getAddressHandle" error-message="{{value_err}}" required readonly />
<van-popup show="{{ showAddChoose }}" round position="bottom">
<van-area area-list="{{ areaList }}" bind:confirm="confirmHandle" bind:cancel="cancelHandle" />
</van-popup>
3、验证
发现验证是没有提供表单验证的，如果要验证，只有在点击按钮的时候，去判断输入框的值是否达到需求。通过配置error-message或者error属性的值显示错误提示信息
<van-field label="联系人" model:value="{{ user_name }}" placeholder="请输入联系人姓名" clearable error-message="请输入联系人姓名" required/>
文章来源：https://www.toymoban.com/news/detail-512571.html
<van-field label="联系人" model:value="{{ user_name }}" placeholder="请输入联系人姓名" clearable error="请输入联系人姓名" required/>
文章来源地址https://www.toymoban.com/news/detail-512571.html
到了这里，关于微信小程序整合vantweapp van-field遇到的坑？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
