1、雙向綁定的實現(xiàn)
最低基礎(chǔ)庫版本在 2.9.3 以上時，可以使用簡易雙向綁定。
<van-cell-group>
<van-field
model:value="{{ value }}"
placeholder="請輸入用戶名"
border="{{ false }}"
/>
</van-cell-group>
Page({
data: {
value: '',
info:{
value:''
}
},
});
但是在雙向綁定的時候，發(fā)現(xiàn)有一個層級關(guān)系
//雙向綁定失效
<van-field
model:value="{{ info.value }}"
placeholder="請輸入用戶名"
border="{{ false }}"
/>
//雙向綁定有效
<van-field
model:value="{{ value }}"
placeholder="請輸入用戶名"
border="{{ false }}"
/>
2、不允許用戶輸入，但不能置灰的情況
在用戶添加地址，和van-popup、van-area結(jié)合使用的時候，點擊輸入框，彈出選擇地址的框，此時發(fā)現(xiàn)用戶仍然可以輸入，我就想到了禁用，但是發(fā)現(xiàn)禁用會置灰，給用戶一種不可輸入的感覺，但是點擊的時候發(fā)現(xiàn)還是可以彈出彈窗。這時發(fā)現(xiàn)可以設(shè)置只讀屬性readonly就達(dá)到了自己想要的效果（用戶不可以輸入，通過點擊選擇地址）
<van-field model:value="{{ value}}" label="地址" placeholder="請選擇服務(wù)地址" 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、驗證
發(fā)現(xiàn)驗證是沒有提供表單驗證的，如果要驗證，只有在點擊按鈕的時候，去判斷輸入框的值是否達(dá)到需求。通過配置error-message或者error屬性的值顯示錯誤提示信息
<van-field label="聯(lián)系人" model:value="{{ user_name }}" placeholder="請輸入聯(lián)系人姓名" clearable error-message="請輸入聯(lián)系人姓名" required/>
文章來源：http://www.zghlxwxcb.cn/news/detail-512571.html
<van-field label="聯(lián)系人" model:value="{{ user_name }}" placeholder="請輸入聯(lián)系人姓名" clearable error="請輸入聯(lián)系人姓名" required/>
文章來源地址http://www.zghlxwxcb.cn/news/detail-512571.html
到了這里，關(guān)于微信小程序整合vantweapp van-field遇到的坑？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
