v-model(双向数据绑定)自动收集数据

v-model 是 Vue 中一个常用的指令，用于实现表单元素与数据的双向绑定。它的实现原理主要基于以下两个方面：

语法实现：
v-model 实际上是 Vue 对 :value 和 @input 两个属性的语法糖。当我们在组件中使用 v-model 指令时，Vue 会根据元素类型自动为该元素绑定 value 属性和 input 事件。
值的传递与更新：
v-model 绑定的值会随着用户在表单元素上的操作而同步更新。当用户修改绑定的表单元素时，会触发相应的事件（如 input 事件），Vue 会根据事件的值更新绑定的数据。同时，Vue 也会将绑定的数据更新到表单元素的属性（如 value）上，确保页面上的显示与数据的实时同步。

注意：v-model 只能应用于支持值传递的表单元素，例如 input、radio、text,textarea 和 select。

<template><div style="font-size: 14px"><form action="/xxx" @submit.prevent="regist"><span>用户名: </span><input type="text" v-model.trim="userForm.userName" /><br /><span>密码: </span><inputtype="password"v-model="userForm.pwd"placeholder="请输入密码"/><br /><span>性别: </span><input type="radio" id="female" value="女" v-model="userForm.sex" /><label for="female">女</label><input type="radio" id="male" value="男" v-model="userForm.sex" /><label for="male">男</label><br /><span>爱好: </span><input type="checkbox" id="basket" value="basket" v-model="userForm.likes" /><label for="basket">篮球</label><input type="checkbox" id="ct" value="ct" v-model="userForm.likes" /><label for="ct">唱跳</label><inputtype="checkbox"id="rap"value="rap"v-model="userForm.likes"/><label for="rap">rap</label><br /><span>城市: </span><select v-model="userForm.cityId"><option value="">未选择</option><option v-for="city in allCitys" :key="city.id" :value="city.id">{{ city.name }}</option></select><br /><span>介绍: </span><textarea v-model="userForm.info"></textarea><br /><input type="submit" value="提交表单" /></form></div>
</template><script lang="ts">
// vue3.0版本语法
import { defineComponent, ref } from "vue";
export default defineComponent({name: "组件名",setup() {// 初始化数据const userForm = ref({userName: "admin",pwd: "",sex: "女",likes: ["rap"],info: "",cityId: "",});const allCitys = ref([{ id: 1, name: "苏州" },{ id: 2, name: "南京" },{ id: 3, name: "上海" },]);const regist = () => {console.log('提交表单',userForm.value);};return {allCitys,userForm,regist,};},
});
</script>