vue v-model instructions for use

1 Overview

v-modelvalueThe initial values ​​of the , checked, and attributes of  all form elements are ignored  selected and the data of the Vue instance is always used as the data source. data You should declare initial values ​​in the component's options via JavaScript  .

 

2. Value binding

For radio button, checkbox and select box options, the v-model bound value is usually a static string (or a boolean value for checkboxes):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- When the first option is selected, `selected` is the string "abc" --> 
< select v-model = "selected" > 
  < option value = "abc" > ABC </ option > 
</ select >

 

3. Modifiers

（1）lazy

By default,  the value of the input box is synchronized with the data after v-model each  event is fired (except when the above input method combines text). You can   switch to using   events for synchronization by adding modifiers:inputlazychange

<!-- Update on "change" instead of "input" --> 
< input v-model.lazy ="msg"  >

（2）trim

If you want to automatically filter the leading and trailing whitespace characters entered by the user, you can  v-model add  trim modifiers:

<input v-model.trim="msg">