当前位置: 首页 > news >正文

Vue表单的整体处理

在前端的处理中,表单的处理永远是占高比例的。在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  :用户的输入内容会自动去除两端的空格

http://www.lryc.cn/news/241106.html

相关文章:

  • 探索实人认证API:保障在线交互安全的关键一步
  • XDR 网络安全:技术和最佳实践
  • 【如何学习Python自动化测试】—— 警告框处理
  • Jenkins Ansible 参数构建
  • 第十五届蓝桥杯(Web 应用开发)模拟赛 1 期-大学组(详细分析解答)
  • 2023亚太杯数学建模B题思路+模型+代码+论文
  • GitHub 报告发布:TypeScript 取代 Java 成为第三受欢迎语言
  • 配置hikari数据库连接池时多数据源不生效
  • matlab 最小二乘拟合平面并与XOY平面对齐
  • jQuery【回到顶部、Swiper轮播图、立即执行函数、链式调用、参数重载、jQuery扩展】(六)-全面详解(学习总结---从入门到深化)
  • day60
  • thingsboard的WebSocket API的使用
  • An issue was found when checking AAR metadata
  • 搭建线上jvm监控
  • 【计算机网络笔记】数据链路层概述
  • vscode-insiders Remote-SSH XHR failed无法访问远程服务器
  • Ubuntu开机显示No bootable devices found
  • 设计模式——行为型模式(二)
  • SpringBoot中企业微信的API调用
  • [前端] V8引擎编译原理
  • 使用Pytorch实现linear_regression
  • 网络安全等级保护收费标准?
  • 16 Go的反射
  • SQL Server 百万数据查询优化技巧三十则
  • list转map(根据某个或多个属性分组)
  • 常见树种(贵州省):012茶、花椒、八角、肉桂、杜仲、厚朴、枸杞、忍冬
  • 千云物流 - 使用k8s负载均衡openelb
  • C语言之字符串函数
  • python中一个文件(A.py)怎么调用另一个文件(B.py)中定义的类AA详解和示例
  • spark shuffle 剖析