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 如何保持原类型？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
234
