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

class 5: vue.js 3 v-model和表单输入

news 2025/11/11 20:41:00
  • v-model是Vue.js 3中用于实现双向绑定的重要指令，双向绑定就是对于数据的修改会映射回UI组件上，同时对于UI组件上数据的变更也会映射回底层数据当中，v-model会根据控件的类型自动选取正确的方法来更新元素
  • v-model底层实现的原理实际上是v-bind和v-on的结合，首先使用v-bind为value属性绑定变量；然后使用v-on绑定input事件，并在事件回调中重新为value属性绑定的变量赋值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><h2>{{ message }}</h2><div class="container"><input type="text" class="input" :value="message" @input="inputChange"><input type="text" class="input" v-model="message"></div></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {message: 'Hello World'}},methods: {inputChange(event) {this.message = event.target.value}}}Vue.createApp(App).mount('#app')</script>
</body>
</html><style>
.container {display: flex;flex-wrap: wrap;width: 100px;
}
.input {width: 100px;margin: 10px;
}
</style>
  • 可以看到，上面的两种input组件都能实现双向绑定的效果

v-model的修饰符

v-model指令支持使用修饰符来完成一些特殊的操作，Vue.js 3常见的v-model修饰符如下

  1. .lazy：将输入内容的更新延迟到change事件触发时再进行，而不是每次输入内容都进行更新
<input type="text" class="input" v-model.lazy="message">
  1. .number：自动将输入内容转换为数字类型，如果不用这个的话，默认输入的都是字符串类型，用这个之后，数字会自动转换为数字类型
<input type="text" class="input" v-model.number="message">
  1. .trim：去除输入内容的首位空格，这个的效果是最中绑定到数据上的时候，会自动去除首位的空格
<input type="text" class="input" v-model.trim="message">

可以用下面的代码整体验证一下

<template id="my-app"><h2>{{ message }} -> {{ typeof message}}</h2><div class="container"><input type="text" class="input" :value="message" @input="inputChange"><input type="text" class="input" v-model="message"><input type="text" class="input" v-model.lazy="message"><input type="text" class="input" v-model.number="message"><input type="text" class="input" v-model.trim="message"></div>
</template>

相关文章：

class 5: vue.js 3 v-model和表单输入

v-model是Vue.js 3中用于实现双向绑定的重要指令&#xff0c;双向绑定就是对于数据的修改会映射回UI组件上&#xff0c;同时对于UI组件上数据的变更也会映射回底层数据当中&#xff0c;v-model会根据控件的类型自动选取正确的方法来更新元素v-model底层实现的原理实际上是v-bin…...

编程日记 2024/9/6 16:43:34

了解一下HTTP 与 HTTPS 的区别

介绍&#xff1a; HTTP是超文本传输协议。规定了客户端&#xff08;通常是浏览器&#xff09;和服务器之间如何传输超文本&#xff0c;也就是包含链接的文本。通常使用TCP【1】/IP协议来传输数据&#xff0c;默认端口为80。 HTTPS是超文本传输安全协议&#xff0c;具有CA证书。…...

编程日记 2024/9/6 16:40:31

Opencv中的直方图(1)计算反向投影直方图函数calcBackProject()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算直方图的反向投影。 cv::calcBackProject 函数计算直方图的反向投影。也就是说&#xff0c;类似于 calcHist&#xff0c;在每个位置 (x, y)…...

编程日记 2024/9/6 16:38:28

VUE3项目的几种创建方式

文章目录 1.使用 Vue CLI (Vue Command Line Interface):2.使用 Create Vue App:3.使用 Vite:4.使用图形用户界面 (GUI):5.纯手工搭建6.基于模板创建: 1.使用 Vue CLI (Vue Command Line Interface): Vue CLI 是官方推荐的方式来快速搭建 Vue 项目的基础结构。命令&#xff1a…...

编程日记 2024/9/6 16:34:24

VBA进行excel坐标转换

在Excel里利用坐标绘图时&#xff0c;可以比较容易想到采用数据透视表&#xff0c;但是数据透视表生成的图不可更改&#xff0c;因此本案例采用VBA进行坐标变换而不改变原始值来转换图像&#xff0c;即实现图像的左右翻转和上下翻转&#xff0c;如下图所示&#xff0c;选择map的…...

编程日记 2024/9/6 16:33:23

使用pytorch深度学习框架搭建神经网络

简介 现在主流有两个框架pytorch和TensorFlow,本文主要介绍pytorch PyTorch&#xff1a;由 Facebook 的人工智能研究小组开发和维护。PyTorch 以其动态计算图&#xff08;Dynamic Computational Graph&#xff09;和易用性著称&#xff0c;非常适合研究人员和开发者进行实验和…...

编程日记 2024/9/6 16:30:18

Hive数据库与表操作全指南

目录 Hive数据库操作详解 创建数据库 1&#xff09;语法 2&#xff09;案例 查询数据库 1&#xff09;展示所有数据库 &#xff08;1&#xff09;语法 &#xff08;2&#xff09;案例 2&#xff09;查看数据库信息 &#xff08;1&#xff09;语法 &#xff08;2&#…...

编程日记 2024/9/6 16:28:16

UniaApp引入Iconfont

一、下载图标资源 登录到阿里巴巴矢量图标库&#xff08;iconfont&#xff09;官网&#xff08;https://www.iconfont.cn/&#xff09;。找到你需要的图标并添加到购物车&#xff0c;然后点击购物车图标进入到管理界面&#xff0c;选择 “下载代码”。在下载选项中选择 “Font…...

编程日记 2024/9/6 16:26:14

面试题：软件测试缺陷产生的原因有哪些？

软件缺陷产生的原因多种多样&#xff0c;一般可能有以下几种原因&#xff1a; 1.需求表述、理解、编写引起的错误。 2.系统架构设计引起的错误。 3.开发过程缺乏有效的沟通及监督&#xff0c;甚至没有沟通或监督。 4.程序员编程中产生的错误。 5.软件开发工具本身隐藏的问…...

编程日记 2024/9/6 16:23:12

RabbitMQ 04 集群

01...

编程日记 2024/9/6 16:22:10

axure9勾选多个删除，弹框显示多个中继器编号

文本框 情形是删除逗号 文本框内插入数据...

编程日记 2024/9/6 16:18:45

Git 使用指南 --- 版本管理

序言 Git 是一个开源的 分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。对一个程序员来说&#xff0c;掌握 Git 的使用是必要的。  在这个系列中&#xff0c;将详细的介绍 Git 的使用和原理&#xff0c;话不多说&#xff0c;让我们开始吧。…...

编程日记 2024/9/6 16:16:23

C#进阶-ASP.NET实现可以缩放和旋转的图片预览页

本文详细介绍了如何在ASP.NET WebForms中实现一个功能丰富的图片预览页面。通过结合HTML、CSS和JavaScript&#xff0c;用户可以方便地对图片进行放大、缩小以及旋转操作。文章从页面的基本布局开始&#xff0c;逐步讲解了如何设置图片展示区、添加控制按钮、编写CSS样式以及实…...

编程日记 2024/9/6 16:15:21

【小程序 - 大智慧】深入微信小程序的核心原理

目录 课程目标背景双线程架构WebView 结构快速渲染 PageFrame编译原理Exparser通讯系统生命周期基础库解包跨端框架预编译半编译半运行运行时框架 主流技术Tarouni-app汇总 下周安排 课程目标 本次课程主要通过后台管理小程序回顾一下小程序的高阶语法&#xff0c;然后讲解整体…...

编程日记 2024/9/6 16:14:18

Qt 去掉QDialog对话框的问号

QT 对话框的问号是什么&#xff1f; QDialog默认的window flag中包含了Qt::WindowContextHelpButtonHint,这个flag意思是在窗口上提供“上下文帮助”按钮 使用方式/调用方式 void QWidget::setWhatsThis(const QString &)比如&#xff1a; ui->lineEdit_1->setWh…...

编程日记 2024/9/6 16:11:33

负载均衡 Ribbon 与 Fegin 远程调用原理

文章目录 一、什么是负载均衡二、Ribbon 负载均衡2.1 Ribbon 使用2.2 Ribbon 实现原理 (★)2.3 Ribbon 负载均衡算法 三、Feign 远程调用3.1 Feign 简述3.2 Feign 的集成3.3 Feign 实现原理 (★) 一、什么是负载均衡 《服务治理&#xff1a;Nacos 注册中心》 末尾提到了负载均…...

编程日记 2024/9/6 16:09:47

c/c++:CMakeLists.txt中添加编译/连接选项使用内存错误检测工具Address Sanitizer(ASan)

Address Sanitizer(ASan)是一个快速的内存错误检测工具。从gcc 4.8开始&#xff0c;AddressSanitizer成为gcc的一部分。 既然是gcc内置的内存检查工具&#xff0c;用起来比第三方的库更方便些。只要指定相应的编译链接参数就可以实现内存泄露检查了&#xff0c;如下是是cmake脚…...

编程日记 2024/9/6 16:04:11

armbian cups 远程打印机 1022

使用 CUPS Web 浏览器界面设置和管理打印机 - Oracle Solaris 管理&#xff1a;常见任务 N1刷armbian变身打印服务器&#xff0c;支持全平台无线打印PC扫描_存储设备_什么值得买 (smzdm.com) 第 6 章 使用 Web 界面向 CUPS 添加打印机 | Red Hat Product Documentation apt…...

编程日记 2024/9/6 16:03:10

three.js使用3DTilesRendererJS加载3d tiles数据

原生的 three.js 目前不支持 3d tiles 数据的加载&#xff0c;不过开源社区已经给出了一些解决方案&#xff0c;其中最活跃的要属 3DTilesRendererJS。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力&#xff0c;虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差…...

编程日记 2024/9/6 16:02:09

坐牢第三十五天（c++）

一.作业 1.使用模版类自定义栈 代码&#xff1a; #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…...

编程日记 2024/9/6 15:57:04

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/11/7 14:08:03

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/11/11 18:33:55

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/8 8:17:50

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/11/8 9:16:25

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/7 14:06:23

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/11/7 20:00:44