## 背景
[[inputタグ]]にバインドされる値がいつも分からなくなるので、整理した。
> [!caution]
> [[Google Chrome]]で、[[Vue]]の[[v-model]]で確認しただけなので、他も同様かは分からない。
## コード
```html
<script setup lang="ts">
import { ref } from "vue";
const name = ref<string>("");
</script>
<template>
<div>
<input id="name" type="number" v-model="name" />
<div>『{{ name }}』</div>
<div>type: {{ typeof name }}</div>
</div>
</template>
```
## type="number"
`number | ""` としておけばOK。
| 入力値(表示値) | 値 | 型 |
| -------- | --- | ------ |
| | "" | string |
| - | "" | string |
| -1 | -1 | number |
| 0 | 0 | number |
| 1 | 1 | number |
| 1.1 | 1.1 | number |
## type="date"
`string | ""` としておけばOK。`string` は[[テンプレートリテラル型]]で[[Narrowing]]してもよい。
| 入力値(表示値) | 値 | 型 |
| ---------- | ------------ | ------ |
| 年 /月/日 | "" | string |
| 0002/月/日 | "" | string |
| 0002/01/01 | "0002-01-01" | string |
| 2025/12/11 | "2025-12-11" | string |
| 2025/12/32 | "2025-12-31" | string |
日付として不正な範囲を入力すると、フォーカスが外れたあとに元の値に戻る。
## type="datetime-local"
`string | ""` としておけばOK。`string` は[[テンプレートリテラル型]]で[[Narrowing]]してもよい。
| 入力値(表示値) | 値 | 型 |
| ----------------- | ------------------ | ------ |
| 年 /月/日 --:-- | "" | string |
| 2025/月/日 --:-- | "" | string |
| 2025/12/24 10:-- | "" | string |
| 2025/12/24 10:10 | "2025-12-24T10:10" | string |
| 2025/12/24 25:10 | "2025-12-24T23:10" | string |
日時として不正な範囲を入力すると、フォーカスが外れたあとに元の値に戻る。