Vue值綁定

概述

  對於單選按鈕，複選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對於複選框也可以是布爾值)：

<!-- 當選中時，`picked` 爲字符串 "a" -->
<input type="radio" v-model="picked" value="a">

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

<!-- 當選中第一個選項時，`selected` 爲字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

s  但是有時我們可能想把值綁定到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字符串。

複選框

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

// 當選中時
vm.toggle === 'yes'
// 當沒有選中時
vm.toggle === 'no'

  這裏的 true-value 和 false-value 特性並不會影響輸入控件的 value 特性，因爲瀏覽器在提交表單時並不會包含未被選中的複選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。

單選按鈕

<input type="radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

選擇框的選項

<select v-model="selected">
    <!-- 內聯對象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123