Message is: {{ message }}

 
 
Message is: {{ message }}

 

  Multiline message is:
  {{ message }}
  
 
 

[注意]在文本區(qū)域插值( ) 并不會生效，應用 v-model 來代替

 
 {{ checked }}



 

  
  Jack
  
  John
  
  Mike 
 
 

  Checked names: {{ checkedNames }} 
 

 

  
  One  
 
 

  
  Two  
 
 
Picked: {{ picked }}

 
  請選擇
  A
  B
  C
 
 Selected: {{ selected }}

[注意]如果v-model表達初始的值不匹配任何的選項，元素就會以”未選中”的狀態(tài)渲染。在iOS中，這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS不會引發(fā)change事件。因此，像以上提供disabled選項是建議的做法

多選列表

 
  A
  B
  C
 

 Selected: {{ selected }} 動態(tài)選項用v-for渲染

 
  
   {{ option.text }}
  
 
 Selected: {{ selected }}

對于單選按鈕，勾選框及選擇列表選項， v-model綁定的value通常是靜態(tài)字符串（對于勾選框是邏輯值）

 ABC

但若要綁定value到Vue實例的一個動態(tài)屬性上，就可以用v-bind實現(xiàn)，并且這個屬性的值可以不是字符串

 
 {{ toggle }}

 
 {{ pick }}

 
  123
  234
  345
 
  Selected: {{ selected.number }}

在默認情況下， v-model在input事件中同步輸入框的值與數(shù)據(jù)，但可以添加一個修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵赾hange事件中同步

下列例子中，光標移出輸入框時，才同步數(shù)據(jù)

 
 
Message is: {{ message }}

如果想自動將用戶的輸入值轉(zhuǎn)為Number類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個修飾符number給v-model來處理輸入值

這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型

 

  
  {{type1}}
  
普通輸入: {{ age1 }}
  
 
 

  
  {{type2}}
  
number修飾符輸入: {{ age2 }}
  
 

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

 
 
msg is: {{ msg }}

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

上述內(nèi)容就是怎么在Vue中使用表單控件數(shù)據(jù)綁定，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。