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

【问题标题】：Why Vue <select v-model="number | string" > both work?为什么 Vue <select v-model="number | string" > 都有效？
【发布时间】：2021-09-20 14:09:19
【问题描述】：

请看这个最小的例子

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 知道将我的号码映射到字符串？

【问题讨论】：

我觉得不是 vue 而是 html。 html中的输入将所有值视为字符串，没有数值等。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

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

你可以learn here多一点

【讨论】：