javascript - vue 官方文件 對於v-model 綁定value 的解釋

Question

但是有時我們想要綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，而這個屬性的值可以不是字串。

問題：
1.詳細解釋上面這段話
2.結合下面的程式碼 分別寫一個完整的demo

複選框

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

單選按鈕

<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

Answer 1

說的是 radio, checkbox 或 select options 的取值，可以是靜態的字串，也可以是實例資料、計算屬性之類的實例屬性。

其實後面的範例已經給得很詳細了：
當使用者點選該radio 時， vm.picked 是字串" a"，而，當使用者選取時，vm.pick 是vm.a 這個實例屬性。

選擇清單的範例也很好理解。

其實你自己把程式碼敲一遍運行一下，差不多就能理解了，不過敲程式碼的時候，可能會有一些錯誤提示（如沒有a 實例資料的話，會提示綁定的資料沒有聲明，這時候在data裡面增加一個a 就可以了），Vue 對中文學習者不太友好的地方在於，其控制台中的錯誤提示都是英文的，有些害怕英文的童鞋可能就會望而卻步。