温故知新 Vue 3: Lesson 7

Form Input Bindings

two-way data bindings on form input, textarea, and select elements.

form 元素的双向绑定

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the current active instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

v-mode 会忽略元素上的 value, checked or selected. 如果需要初始化, 请在 data 里面进行.

v-model internally uses different properties and emits different events for different input elements:

v-model 内部针对不同的 form 元素, 采用不同的 property 和 event.

text and textarea elements use value property and input event;
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.

v-model doesn't get updated during IME composition. If you want to cater for these updates as well, use input event instead.

v-model 不会在输入法打字的时候更新, 如果需要, 可以使用 @input

<!-- form input -->
<input v-model="message" placeholder="edit me" />

<!-- form textarea -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- form Single checkbox -->
<input type="checkbox" id="checkbox" v-model="checked" />

<!-- form Multiple checkbox; bound to an array -->
<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

<!-- form radio -->
<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

<!-- form Single Select -->
<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<!-- form Multiple Select -->
<div id="v-model-select" class="demo">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br />
  <span>Selected: {{ selected }}</span>
</div>

<!-- form Dynamic Options Select -->
<div id="v-model-select-dynamic" class="demo">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

If the initial value of your v-model expression does not match any of the options, the <select> element will render in an "unselected" state. On iOS this will cause the user not being able to select

对于<select>, 如果 v-model 的初始值不能匹配上任何一个 option, select 会处于 unselected 的状态. IOS 下可能会导致用户无法选择. 因此最好加上一个值为空的 disabled Option.

Value Bindings

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />

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

<!-- bind the v-model to other value instead of true or false -->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

<!-- bind the value to a dynamic property, the value type refer to pickedValue type -->
<input type="radio" v-model="picked" v-bind:value="pickedValue" />

<!-- if the bind value are object, it cannot map the initial value to the right option -->
<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

But sometimes we may want to bind the value to a dynamic property on the current active instance.

有些时候, 我们想使用不同类型的 value 或绑定 input 的 value 到 data 的一个 property. 可以使用 v-bind

The true-value and false-value attributes don't affect the input's value attribute

true-value and false-value不影响 input 的 value 属性

v-model Modifiers

.lazy
.number
.trim

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />

<!--  user input to be automatically typecast as a number -->
<input v-model.number="age" type="number" />

<!-- whitespace from user input to be trimmed automatically -->
<input v-model.trim="msg" />

elment ui 中 el-input 如果用了.number, 实际会把 input 的内容使用 Number.parseFloat进行转换, 会导致 1.0X这些中间带零的数字无法输入. 请只使用type="number"

本文使用 mdnice 排版