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

大家好，今天本人给大家带来文章《Vue 中 select 标签 value 如何保持原类型？ 》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

Vue 中 <select> 标签改变 value 类型为字符串

在 Vue 中使用 <select> 标签时，通过事件处理程序 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 如何保持原类型？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！