Vue 中 select 标签 value 如何保持原类型？

中 标签改变 value 类型为字符串

在 Vue 中使用 标签时，通过事件处理程序 selectHandler 获取 value 时可能发现其类型发生了改变，全部变为了字符串。这是因为 Vue 为了保持 HTML 兼容性，DOM 中的属性默认都是字符串类型。

解决此问题的方法是使用 v-model 指令，配合模型值 this.modelValue。使用 v-model 后，modelValue 的类型将与 :value 绑定的值保持一致，即使其为数字类型。

<script>
import { ref } from 'vue';

export default {
  setup() {
    const modelValueRef = ref<number | string | undefined>();

    return {
      modelValueRef,
    };
  },
};
</script>

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

登录后复制

通过这种方式，即使在 HTML 的 DOM 结构中 value 类型为字符串，但在 Vue 的响应式系统中，modelValueRef 的类型仍将保持为数字或字符串。

以上就是Vue 中 select 标签 value 如何保持原类型？的详细内容，更多请关注GTHOST其它相关文章！