为什么 Vue <select v-model="number | string"> 两者都有效？

Question

请参阅这个最小示例

new Vue({
  el: '#app',
  data() {
    return {
      valueIsString: '1',
      valueIsNumber: 1,
    }
  },
  template: `
    <div>
      <select v-model="valueIsString">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>

      <select v-model="valueIsNumber">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

我有两种不同<select>，一种是绑定到string，另一种是绑定到number。

他们都工作，为什么会发生这种情况？

为什么 Vue 知道将我的号码映射到字符串？

Answer 1

这应该是使用 JavaScript 的结果。如果你没有准确地声明类型，JS 允许你做很多事情。

因此，如果您知道希望输入类型为整数，则只需.number在 v-model 之后添加修饰符即可：

<select v-model.number="valueIsNumber">

你可以在这里学到更多一点