表单与 v-model

<script setup lang="ts">
import { ref } from 'vue';
const text = ref('');
const checked = ref(false);
const picked = ref('A');
const selected = ref('');
</script>
 
<template>
  <input v-model="text" placeholder="输入文字" />
  <textarea v-model="text"></textarea>
 
  <input type="checkbox" v-model="checked" /> {{ checked }}
 
  <input type="radio" value="A" v-model="picked" /> A
  <input type="radio" value="B" v-model="picked" /> B
 
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
  </select>
</template>

<input v-model.lazy="text" />   <!-- 失焦/change 时才更新，而非每次输入 -->
<input v-model.number="age" />  <!-- 自动 parseFloat，转成数字 -->
<input v-model.trim="name" />   <!-- 自动去首尾空格 -->

<!-- ChildInput.vue -->
<script setup lang="ts">
const model = defineModel<string>(); // 自动拿到 prop + 提供 emit
</script>
 
<template>
  <input :value="model" @input="model = ($event.target as HTMLInputElement).value" />
</template>

<!-- 父 -->
<ChildInput v-model="name" />

<UserName v-model:first="first" v-model:last="last" />

const first = defineModel<string>('first');
const last = defineModel<string>('last');

const props = defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
// 模板里： :value="props.modelValue" @input="emit('update:modelValue', ...)"

<script setup lang="ts">
import { ref } from 'vue';
const fruits = ref<string[]>([]);
</script>
 
<template>
  <input type="checkbox" value="apple" v-model="fruits" /> 苹果
  <input type="checkbox" value="banana" v-model="fruits" /> 香蕉
  <!-- fruits 会是 ['apple','banana',...] -->
</template>

<script setup lang="ts">
const [model, modifiers] = defineModel<string>({
  set(value) {
    if (modifiers.capitalize) return value.charAt(0).toUpperCase() + value.slice(1);
    return value;
  },
});
</script>

<MyInput v-model.capitalize="name" />