为什么 Vue <选择 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">

你可以在这里学到更多的