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 的取值，可以是静态的字符串，也可以是实例数据、计算属性之类的实例属性。

其实后面的示例已经给得很详细了：
<input type="radio" v-model="picked" value="a"> 当用户点选该 radio 时， vm.picked 是字符串 "a"，而 <input type="radio" v-model="pick" v-bind:value="a">，当用户选中时，vm.pick 是 vm.a 这个实例属性。

选择列表的示例也很好理解。

其实你自己把代码敲一遍运行一下，差不多就能理解了，不过敲代码的时候，可能会有一些错误提示（如没有 a 实例数据的话，会提示绑定的数据没有声明，这时候在 data 里添加一个 a 就可以了），Vue 对中文学习者不太友好的地方在于，其控制台中的错误提示都是英文的，有些害怕英文的童鞋可能就会望而却步。