Vue 中 select 标签的 value 类型为什么总是变成字符串？

了解 中 select 标签的神奇转换：value 类型变身大揭秘

在 Vue 中，使用标签时，你会发现一个奇怪的现象：modelValue的值，无论最初是数字，都会神奇地转换成字符串。这是怎么回事呢？

其实，Vue 会尽可能保持与 HTML 的兼容性，而 DOM 中的属性都是字符串类型的。因此，当你使用event.target.value获取标签的值时，它只能得到一个字符串。

解决之道：巧用 v-model

为了正确的获取的值，你可以使用v-model指令与this.modelValue配合使用。下面是修改后的代码：

立即学习“”；

const modelValueRef = ref<number | string | undefined>()

<select v-model="modelValueRef">
  <option v-for="(item, index) in enumStrsList" :key="index" :value="item[1]">
    {{ item[0] }}
  </option>
</select>

登录后复制

这样一来，this.modelValue的值将保留其原始类型，无论是数字还是字符串。

以上就是Vue 中 select 标签的 value 类型为什么总是变成字符串？的详细内容，更多请关注GTHOST其它相关文章！