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

Vue入门学习笔记-表单

news 文章来源：https://blog.csdn.net/weixin_52937170/article/details/142105255 2025/5/4 9:36:55

  可以使用v-model 指令在表单控件元素上创建双向数据绑定。

引言：

Vue采用了MVVM（Model-View-ViewModel）架构模式，通过指令可以快速实现数据和视图的双向绑定

修改视图层时，模型层也会改变；修改模型层，视图层也会改变

 表单中v-model的使用

  • v-model 会根据控件类型自动选取正确的方法来更新元素。

输入框

例：input和textarea元素中使用v-model实现双向数据绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>input 元素：</p><input v-model="message" placeholder="编辑我……"><p>消息是: {{ message }}</p><p>textarea 元素：</p><p style="white-space: pre">{{ message2 }}</p><textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div><script>
new Vue({el: '#app',data: {message: '百度一下，你就知道',message2: '百度\r\nhttp://www.baidu.com'}
})
</script>
</body>
</html>

复选框

  • 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>单个复选框：</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><p>多个复选框：</p><input type="checkbox" id="csdn" value="CSDN" v-model="checkedNames"><label for="csdn">CSDN</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">Google</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">taobao</label><br><span>选择的值为: {{ checkedNames }}</span>
</div><script>
new Vue({el: '#app',data: {checked : false,checkedNames: []}
})
</script>
</body>
</html>

单选按钮

  • 单选按钮的双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><input type="radio" id="csdn" value="CSDN" v-model="picked"><label for="csdn">CSDN</label><br><input type="radio" id="google" value="Google" v-model="picked"><label for="google">Google</label><br><span>选中值为: {{ picked }}</span>
</div><script>
new Vue({el: '#app',data: {picked : 'Runoob'}
})
</script>
</body>
</html>

select 列表

  • 下拉列表的双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><select v-model="selected" name="fruit"><option value="">选择一个网站</option><option value="www.csdn.net">CSDN</option><option value="www.google.com">Google</option></select><div id="output">选择的网站是: {{selected}}</div>
</div><script>
new Vue({el: '#app',data: {selected: '' }
})
</script>
</body>
</html>

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

总结：

 vue表单实现数据的双向绑定 

相关文章：

Vue入门学习笔记-表单

可以使用v-model 指令在表单控件元素上创建双向数据绑定。 引言&#xff1a; Vue采用了MVVM&#xff08;Model-View-ViewModel&#xff09;架构模式&#xff0c;通过指令可以快速实现数据和视图的双向绑定 修改视图层时&#xff0c;模型层也会改变&#xff1b;修改模型层&#…...

编程日记 2024/9/11 9:56:31

TCP通信三次握手、四次挥手

目录 前言 一、三次握手 TCP三次握手的详细过程 二、四次挥手 四次挥手的详细过程 前言 前面我说到了&#xff0c;UDP通信的实现&#xff0c;但我们经常说UDP通信不可靠&#xff0c;是因为他只会接收和发送&#xff0c;并不会去验证对方收到没有&#xff0c;那么我们说TCP通…...

编程日记 2024/9/11 9:53:28

【实施文档】软件项目实施方案（Doc原件2024实际项目）

软件实施方案 二、 项目介绍 三、 项目实施 四、 项目实施计划 五、 人员培训 六、 项目验收 七、 售后服务 八、 项目保障措施软件开发管理全套资料包清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产品需求规格说明书&am…...

编程日记 2024/9/11 9:52:27

BeanFactory vs. ApplicationContext

在Spring框架中&#xff0c;BeanFactory和ApplicationContext都是用于管理Spring容器中的bean的接口&#xff0c;但它们在功能和应用场景上有所不同。下面是它们的主要区别&#xff1a; 1. 基础功能 vs. 扩展功能 BeanFactory: 是Spring框架的最基础的IoC容器&#xff0c;提供…...

编程日记 2024/9/11 9:50:25

JDBC客户端连接Starrocks 2.5

<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://ma…...

编程日记 2024/9/11 9:49:23

004——双向链表和循环链表

目录 双向链表 双向链表的初始化&#xff08;与单链表类似&#xff09; 增&#xff1a; Ⅰ&#xff09;头插法 Ⅱ&#xff09;尾插法 Ⅲ&#xff09;中间插入 删 改 查 整体代码示例&#xff1a; 循环链表 循环单链表 ​编辑 循环双链表 双向链表 不同于单链表&…...

编程日记 2024/9/11 9:48:22

framebuffer帧缓存

framebuffer:帧缓冲&#xff0c;帧缓存 Linux内核为显示提供的一套应用程序接口。&#xff08;驱动内核支持&#xff09; framebuffer本质上是一块显示缓存&#xff0c;往显示缓存中写入特定格式的数据就意味着向屏幕输出内容。framebuffer驱动程序控制LCD显示设备&#xff0…...

编程日记 2024/9/11 9:47:21

24_竞赛中的高效并查集

菜鸟&#xff1a;老鸟&#xff0c;我最近在做一个与社交网络相关的项目&#xff0c;需要频繁地检查两个用户是否属于同一个群组。但我发现每次检查都很耗时&#xff0c;性能很差。你有什么建议吗&#xff1f; 老鸟&#xff1a;你可以试试使用并查集&#xff08;Union-Find&…...

编程日记 2024/9/11 9:46:20

新手c语言讲解及题目分享（十七）--运算符与表达式专项练习

本文主要讲解c语言的基础部分&#xff0c;运算符与表达式的学习&#xff0c;在这一部分中&#xff0c;往往有许多细节的东西需要去记住。当各种运算符一起用时&#xff0c;就会存在优先级的关系&#xff0c;本文末尾有各种运算符的优先级顺序表。 参考书目和推荐学习书目&#…...

编程日记 2024/9/11 9:44:17

香帅的金融学讲义：深入剖析与解读

香帅的金融学讲义&#xff1a;深入剖析与解读 金融学&#xff0c;这个看似高深复杂的学科&#xff0c;实则与我们的生活息息相关。从个人理财到国家宏观经济政策&#xff0c;金融学无处不在。那么&#xff0c;如何更好地理解金融学呢&#xff1f;今天&#xff0c;我们就来借助…...

编程日记 2024/9/11 9:42:15

java基础-IO（6）转换流InputStreamReader、OutputStreamWriter

引入&#xff1a; 从第一节可知&#xff0c;流分为两类&#xff1a;字节流和字符流&#xff0c;转换流就是在两者之间进行转换。 字节流转换为字符流&#xff1b; 字符流转换为字节流。 字符集 字符集&#xff1a;定义了可用字符及其对应的数字编码的集合。常见的字符集有UT…...

编程日记 2024/9/11 9:41:14

使用Azure Devops Pipeline将Docker应用部署到你的Raspberry Pi上

文章目录 1. 添加树莓派到 Agent Pool1.1 添加pool1.2 添加agent 2. 将树莓派添加到 Deployment Pool2.1 添加pool2.2 添加target 3. 添加编译流水线3.1 添加编译命令3.2 配置触发器 4. 添加发布流水线4.1 添加命令行4.2 配置artifact和触发器 5. 完成 1. 添加树莓派到 Agent P…...

编程日记 2024/9/11 9:40:13

91、K8s之ingress上集

一、Ingress service模式&#xff1a; loadbalance NodePort&#xff1a;每个节点都会有一个指定的端口 30000-32767 内网 clusterip&#xff1a;默认模式&#xff0c;只能pod内部访问 externalName&#xff1a;需要dns提供域名 1.1、对外提供服务的ingress service&…...

编程日记 2024/9/11 9:37:10

NISP 一级 | 2.1 密码学

关注这个证书的其他相关笔记&#xff1a;NISP 一级 —— 考证笔记合集-CSDN博客 通过上一章的学习&#xff0c;我们知道了&#xff0c;网络安全的 CIA 模型&#xff0c;而本期学习的“密码学”&#xff0c;则能为 CIA 模型提供很好的技术支持&#xff1a; 面临的攻击威胁所破坏…...

编程日记 2024/9/11 9:32:05

深度学习速通系列:混淆矩阵是什么

混淆矩阵&#xff08;Confusion Matrix&#xff09;是一种评估分类模型性能的工具&#xff0c;尤其在监督学习中用于分析分类结果。它通过一个矩阵的形式&#xff0c;将模型的预测结果与实际标签进行比较&#xff0c;从而可以清晰地看到模型在各个类别上的表现。以下是混淆矩阵…...

编程日记 2024/9/11 9:31:04

综合评价 | 基于熵权-变异系数-博弈组合法的综合评价模型（Matlab）

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 根据信息熵的定义&#xff0c;对于某项指标&#xff0c;可以用熵值来判断某个指标的离散程度&#xff0c;其信息熵值越小&#xff0c;指标的离散程度越大&#xff0c; 该指标对综合评价的影响&#xff08;即权重&…...

编程日记 2024/9/11 9:30:03

模板与泛型编程笔记（一）

1. 推荐书籍 《C新经典 模板与泛型编程》难得的很容易看得懂的好书&#xff0c;作者讲技术不跳跃&#xff0c;娓娓道来&#xff0c;只要花点时间就能看懂。 2. 笔记 模板为什么要用尖括号&#xff1f;因为便于编译器解析&#xff0c;可以将模板和普通函数声明分开。其实尖括…...

编程日记 2024/9/11 9:28:01

ubuntu 和windows用samba服务器实现数据传输

1&#xff0c;linux安装samba服务器 sudo apt-get install samba samba-common 2&#xff0c;linux 配置权限&#xff0c;修改目录权限&#xff0c;linux下共享的文件权限设置。 sudo chmod 777 /home/lark -R 3. 添加samba用户 sudo smbpasswd -a lark 4&#xff0c;配置共享…...

编程日记 2024/9/11 9:27:00

NISP 一级 | 3.2 网络安全威胁

关注这个证书的其他相关笔记&#xff1a;NISP 一级 —— 考证笔记合集-CSDN博客 网络安全威胁主要来自攻击者对网络及信息系统的攻击&#xff0c;攻击者可以通过网络嗅探、网络钓鱼、拒绝服务、远程控制、社会工程学等网络攻击手段&#xff0c;获得目标计算机的控制权&#xff…...

编程日记 2024/9/11 9:23:58

【技术实践】MySQL分表分库全解析：从理论到实战

文章目录 【技术实践】MySQL分表分库全解析&#xff1a;从理论到实战1. 引言1.1 MySQL数据库面临的挑战1.2 分表分库的概念与优势 2. MySQL分表分库的基本原理2.1 水平分表2.2 垂直分表2.3 水平分库2.4 分表分库的选择标准 3. 实现分表分库的技术方案3.1 中间件解决方案3.2 自定…...

编程日记 2024/9/11 9:20:53

动手学深度学习（一）简介+预备知识+基础知识（上）

一、简介 1、机器学习 机器学习研究如何使用经验改善计算机系统的性能。 2、表征学习 表征学习是机器学习的一类&#xff0c;研究的是&#xff0c;如何自动学习出数据合适的表示方式&#xff0c;更好地由输入得到正确的输出。 3、深度学习 深度学习是具有多级表示的表征学…...

编程日记 2024/9/11 9:18:51

dubbo 服务消费原理分析之应用级服务发现

文章目录 前言一、MigrationRuleListener1、迁移状态模型2、Provider 端升级3、Consumer 端升级4、服务消费选址5、MigrationRuleListener.onRefer6、MigrationRuleHandler.doMigrate6、MigrationRuleHandler.refreshInvoker7、MigrationClusterInvoker.migrateToApplicationFi…...

编程日记 2024/9/11 9:17:50

QT如何在对话框中插入表格

在Qt中&#xff0c;如果你想要在对话框中插入表格&#xff0c;通常会使用QTableWidget或QTableView结合QStandardItemModel&#xff08;对于QTableView&#xff09;或直接在QTableWidget中操作。这里&#xff0c;我将介绍如何使用QTableWidget在对话框中插入表格&#xff0c;因…...

编程日记 2024/9/11 9:12:45

如何使用SSHFS通过SSH挂载远程文件系统？

SHFS&#xff08;SSH 文件系统&#xff09;是一款功能强大的工具&#xff0c;它允许用户通过 SSH 挂载远程文件系统&#xff0c;从而提供一种安全便捷的方式来访问远程文件&#xff0c;就像访问本地文件一样。本文将引导您完成使用 SSHFS 挂载远程文件系统的过程&#xff0c;为…...

编程日记 2024/9/11 9:08:41

SEELE 框架是

SEELE 框架是一个相对新颖的组织管理和优化框架&#xff0c;旨在帮助团队或企业更好地实现目标。它的核心思想是通过科学的管理方法来提升组织的执行力和决策能力。以下是对 SEELE 框架的详细讲解&#xff0c;包括定义、内容、实施步骤、实施策略以及推荐的实践方法和工具。 一…...

编程日记 2024/9/11 9:05:37

高教社杯数模竞赛特辑论文篇-2013年B题：碎纸复原模型与算法(续)(附MATLAB代码实现)

目录 4.3 三维碎纸复原模型 4.3.1 三维模型的降维 4.3.2 三维碎纸复原算法 4.3.3 模型求解 五、模型改进与推广 5.1 模型优点 5.2 模型缺点 5.3 模型改进 5.3.1 适用彩色图片的改进 5.3.2 最小干预度算法 5.4 模型推广 参考文献 代码实现 模拟退火法代码 GUI 程序代码 层次特征…...

编程日记 2024/9/11 9:04:37

Java操作Miscrosoft Office各类文件格式的开源免费工具库

Aspose.Words库 是一个商业Java库&#xff0c;还封装了常用的word、pdf、防伪码、水印等诸多功能。Apache 库需要注意的前置问题 问题1&#xff1a;Word的两个格式doc和docx&#xff0c;POI并没有提供统一的处理类。分别用 HWPFDocument 处理doc文档&#xff0c;用 XWPFTempl…...

编程日记 2024/9/11 9:01:34

Redis 缓存淘汰算法策略详解

引言 Redis 作为一款高性能的内存数据库&#xff0c;在处理大量数据时&#xff0c;由于内存有限&#xff0c;需要在数据达到设定的内存上限后&#xff0c;使用缓存淘汰策略来决定哪些数据应该被移除&#xff0c;以腾出空间存储新的数据。这一过程被称为缓存淘汰&#xff0c;通…...

编程日记 2024/9/11 8:59:32

Kubernetes PV生命周期的四个阶段

Kubernetes PV生命周期的四个阶段 1. Available（可用）2. Bound（已绑定）3. Released（已释放）4. Failed（失败）💖The Begin💖点点关注，收藏不迷路💖 在Kubernetes中，PersistentVolume（PV）的生命周期主要包括以下四个阶段： 1. Available（可用） 状态：PV刚创建…...

编程日记 2024/9/11 8:58:31

Azure OpenAI models being unable to correctly identify model

题意&#xff1a;Azure OpenAI模型无法正确识别模型。 问题背景&#xff1a; In Azure OpenAI Studio, while I am able to deploy a GPT-4 instance, the responses are based solely on GPT-3.5 Turbo. I test the same prompts in my personal ChatGPT sub and it returns …...

编程日记 2024/9/11 8:57:30