新聞中心
這篇文章給大家分享的是有關(guān)vue表單的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

一、基本用法
你可以用 v-model 指令在表單 及
但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù),并對一些極端場景進(jìn)行一些特殊處理。
v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項(xiàng)中聲明初始值。
一組代碼,看完text、textarea、radio、checkbox、select的基本用法:
var app7 = new Vue({ el: '#app7', data:{ message: '單行文本', message1: '多行文本', picked: true, sex: 'boy', hobby: ['爬山','滑雪'], select: 'css', selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } });
二、值綁定
單選按鈕、復(fù)選框和選擇列表在單獨(dú)使用或單選的模式下, v-model 綁定的值是一個靜態(tài)字符串或布爾值, 但在業(yè)務(wù)中,有時需要綁定一個動態(tài)的數(shù)據(jù), 這時可以用v-bind 來實(shí)現(xiàn)。
一組代碼,看完表單常用radio、checkbox、select的值綁定:
var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' } });{{picked}}
{{value}}
{{toggle}}
{{value1}}
{{value2}}
{{selected.number}}
三、修飾符
與事件的修飾符類似, v-model 也有修飾符,用于控制數(shù)據(jù)同步的時機(jī)。
一組代碼,看完常用修飾符lazy、number、trim
var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' } });{{message}}
{{typeof number}}
{{text}}
感謝各位的閱讀!關(guān)于“vue表單的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站名稱:vue表單的示例分析-創(chuàng)新互聯(lián)
文章起源:http://www.dlmjj.cn/article/gpgpg.html


咨詢
建站咨詢
