在前端的處理中，表單的處理永遠是占高比例的。在BOM+DOM+js的時候是這樣，在Vue的時候也是這樣。Vue的表單處理做了特別的優化，如值綁定、數據驗證、錯誤提示、修飾符等。
表單組件的示例：
<script setup lang="ts">
import {ref} from "vue"
import axios from "axios"const name=ref("");const gender=ref("");const birthDate=ref("");const phone=ref("");const applyReason=ref("");const scopes=ref([]);const luckyNumber=ref(1);function submitForm(){axios({method:"post",url:"",params:{name:name.value,gender:gender.value,birthDate:birthDate.value,phone:phone.value,applyReason:applyReason.value,scopes:scopes.value,lunckyNumber:luckyNumber.value}}).then((res)=>{console.log(res);});}function resetForm(){name.value="";gender.value="";birthDate.value="";phone.value="";applyReason.value="";scopes.value=[];luckyNumber.value=1;}
</script><template>
<form><div><div>姓名:<input v-model="name" id="name" placeholder="input your name"/></div><div>性別:<input type="radio" value="male" id="male" v-model="gender"/><lable for="male">男</lable><input type="radio" value="female" id="female" v-model="gender"/><lable for="female">女</lable></div><div>出生日期:<input type="date" id="birthDate" v-model="birthDate"/></div><div>手機號碼:<input type="text" v-model="phone"/></div><div>申請理由:<textarea v-model="applyReason" placeholder="add reason here"></textarea></div><div>涉獵范圍:<input type="checkbox" id="reading" value="reading" v-model="scopes"/><lable for="reading">閱讀</lable><input type="checkbox" id="sports" value="sports" v-model="scopes"/><lable for="sports">運行</lable><input type="checkbox" id="dreaming" value="dreaming" v-model="scopes"/><lable for="dreaming">冥想</lable><input type="checkbox" id="playing" value="playing" v-model="scopes"/><lable for="playing">操作</lable></div><div>幸運數字:<select name="select" v-model="luckyNumber"><option selected>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option></select></div><div><button type="button" @click="submitForm">提交</button><button type="button" @click="resetForm">重置</button></div></div>
</form>
</template><style></style>v-model在Vue中有三種修飾符：
v-model.lazy ：由原來的input事件之后更新v-model的值改為change事件之后更新v-model的值，這對復合組件和計算屬性有很大的作用
v-model.number? ：用戶輸入的內容會被自動轉換為數字，輸入框有type="number"時會自動啟用
v-model.trim? ：用戶的輸入內容會自動去除兩端的空格
)
)