为什么 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允许你很多。

所以如果你知道你希望输入类型是一个整数，你可以简单地在你的 v-model 之后添加一个 .number 修饰符：

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

你可以多一点

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

Why Vue <select v-model="number | string" > both work?

javascript

vue.js

vue-component

vuejs2