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

【vue-5】双向数据绑定v-model及修饰符

news 2026/4/7 1:33:18

单向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改input的值，数据不会自动更新；

双向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改input的值，数据也会自动更新。

一、v-model

1、双向数据绑定

双向数据绑定<input type="text" v-model="web.text">

2、单选框

<input type="radio" v-model="web.radio" value="星期一">星期一
<input type="radio" v-model="web.radio" value="星期二">星期二

3、复选框

<input type="checkbox" v-model="web.checkbox" value="星期一">星期一
<input type="checkbox" v-model="web.checkbox" value="星期二">星期二
<input type="checkbox" v-model="web.checkbox" value="星期三">星期三

4、记住密码

<input type="checkbox" v-model="web.remember">记住密码

5、下拉框

对于<select>，v-model绑定的是select元素中选中的项。

<select v-model="web.select"><option value="">请选择</option><option value="星期一">星期一</option><option value="星期二">星期二</option><option value="星期三">星期三</option>
</select>

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="vue.global.js"></script> --></head>
<body><div id="app"><h3>文本框：{{web.text}}</h3><h3>单选框：{{web.radio}}</h3><h3>复选框：{{web.checkbox}}</h3><h3>记住密码：{{web.remember}}</h3><h3>下拉框：{{web.select}}</h3><hr>单向数据绑定<input type="text" :value="web.text"><br>双向数据绑定<input type="text" v-model="web.text"><hr><!-- 单选框 --><input type="radio" v-model="web.radio" value="星期一">星期一<input type="radio" v-model="web.radio" value="星期二">星期二<hr><!-- 复选框 --><input type="checkbox" v-model="web.checkbox" value="星期一">星期一<input type="checkbox" v-model="web.checkbox" value="星期二">星期二<input type="checkbox" v-model="web.checkbox" value="星期三">星期三<hr><!-- 记住密码 --><input type="checkbox" v-model="web.remember">记住密码<hr><!-- 下拉框 --><select v-model="web.select"><option value="">请选择</option><option value="星期一">星期一</option><option value="星期二">星期二</option><option value="星期三">星期三</option></select></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// const {createApp, reactive} = VuecreateApp({// setup选项，用于设置响应式数据和方法等setup(){ const web = reactive({text:"denglu.com",radio:"",checkbox:[],remember:false,select:""})return{web     }}}).mount("#app")// mount为挂载</script>
</body>
</html>

二、v-model修饰符

实现功能：在失去焦点或按下回车键之后再渲染。

<input type="text" v-model.lazy="web.url">

实现功能：输入框的值转换为数字类型

<input type="text" v-model.number="web.user">

实现功能：去除收尾空格

<input type="text" v-model.trim="web.url">

相关文章：

【vue-5】双向数据绑定v-model及修饰符

单向数据绑定&#xff1a;当数据发生改变时&#xff0c;视图会自动更新&#xff0c;但当用户手动更改input的值&#xff0c;数据不会自动更新&#xff1b; 双向数据绑定&#xff1a;当数据发生改变时&#xff0c;视图会自动更新&#xff0c;但当用户手动更改input的值&#xf…...

编程日记 2024/5/27 16:33:55

[STM32-HAL库]AS608-指纹识别模块-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C8T6

目录 一、前言 二、详细步骤 1.光学指纹模块 2.配置STM32CUBEMX 3.程序设计 3.1 输出重定向 3.2 导入AS608库 3.3 更改端口宏定义 3.4 添加中断处理部分 3.5 初始化AS608 3.6 函数总览 3.7 录入指纹 3.8 验证指纹 3.9 删除指纹 3.10 清空指纹库 三、总结及资源 一、前言 …...

编程日记 2024/5/27 16:32:54

【java程序设计期末复习】chapter4 类和对象

类和对象 编程语言的几个发展阶段 &#xff08;1&#xff09;面向机器语言 计算机处理信息的早期语言是所谓的机器语言&#xff0c;使用机器语言进行程序设计需要面向机器来编写代码&#xff0c;即需要针对不同的机器编写诸如0101 1100这样的指令序列。 &#xff08;2&#x…...

编程日记 2024/5/27 16:31:53

ios：Command PhaseScriptExecution failed with a nonzero exit code

问题 使用 xcode 跑项目真机调试的时候&#xff0c;一直报错 Command PhaseScriptExecution failed with a nonzero exit code。 解决 最终靠以下方法解决 删除Podfile.lock文件删除Pods文件删除.xcworkspace文件Pod installCommandShiftK 清理一下缓存 亲测有效...

编程日记 2024/5/27 16:29:51

《拯救大学生课设不挂科第四期之蓝桥杯是什么？我是否要参加蓝桥杯？选择何种语言？如何科学备赛？方法思维教程》【官方笔记】

背景&#xff1a; 有些同学在大一或者大二可能会被老师建议参加蓝桥杯&#xff0c;本视频和文章主要是以一个过来人的身份来给与大家一些思路。 比如蓝桥杯是什么&#xff1f;我是否要参加蓝桥杯&#xff1f;参加蓝桥杯该选择何种语言&#xff1f;如何科学备赛&#xff1f;等…...

编程日记 2024/5/27 16:28:50

数据挖掘案例-航空公司客户价值分析

文章目录 1. 案例背景2. 分析方法与过程2.1 分析流程步骤2.2 分析过程1. 数据探索分析2. 描述性统计分析3. 分布分析1.客户基本信息分布分析2. 客户乘机信息分布分析3. 客户积分信息分布分析 4. 相关性分析 3. 数据预处理3.1 数据清洗3.2 属性约束3. 3 数据转换 4. 模型构建4. …...

编程日记 2024/5/27 16:26:47

决策树与机器学习实战【代码为主】

文章目录 &#x1f6f4;&#x1f6f4;引言&#x1f6f4;&#x1f6f4;决策树使用案例&#x1f6f4;&#x1f6f4;numpy库生成模拟数据案例&#x1f6f4;&#x1f6f4;决策树回归问题&#x1f6f4;&#x1f6f4;决策树多分类问题 &#x1f6f4;&#x1f6f4;引言 决策树是一种经…...

编程日记 2024/5/27 16:24:45

从感知机到神经网络

感知机 一、感知机是什么二、用感知机搭建简单逻辑电路2.1 与门2.2 与非门2.3 或门 三、感知机的局限性3.1 异或门3.2 线性和非线性 四、多层感知机4.1 已有门电路的组合4.2 Python异或门的实现 五、感知机模型5.1 感知机模型5.2 感知机损失函数5.3 感知机学习算法 六、感知机原…...

编程日记 2024/5/27 16:23:44

【HMGD】STM32/GD32 I2C DMA 主从通信

STM32 I2C配置 主机配置 主机只要配置速度就行 从机配置 从机配置相同速度&#xff0c;可以设置第二地址 因为我的板子上面已经有了上拉电阻&#xff0c;所以可以直接通信 STM32 I2C DMA 定长主从通信代码示例 int state 0; static uint8_t I2C_recvBuf[10] {0}; stat…...

编程日记 2024/5/27 16:20:41

leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度

leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度 leecode 226 翻转二叉树 题目链接 &#xff1a;https://leetcode.cn/problems/invert-binary-tree/description/ 题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。…...

编程日记 2024/5/27 16:19:40

Redux基础

简介 状态管理工具&#xff0c;集中式管理react、vue、angular等应用中多个组件的状态&#xff0c;是一个库,使用之后可以清晰的知道应用里发生了什么以及数据是如何修改&#xff0c;如何更新的 在项目中添加 Redux 并不是必须的,根据项目需求选择是否引入 Redux 三个原则 …...

编程日记 2024/5/27 16:17:38

国外目标公司的任何一个联系人也许都有意义

我们说跟进一个项目&#xff0c;最好能够联系上拥有决策权的人&#xff0c;不然中间隔着几重关系&#xff0c;所有的更新都需要层层审批申报&#xff0c;特别麻烦&#xff0c;总是要等&#xff0c;也许等到最后就是一场空。如果能够直接和老板或者是拍板的人沟通&#xff0c;则…...

编程日记 2024/5/27 16:16:36

因为本地证书太旧或不全导致的 HTTPS 访问失败问题20240520

因为本地证书太旧或不全导致的 HTTPS 访问失败问题 在生产环境中&#xff0c;我们经常需要使用 curl 命令来测试和调试 HTTPS URL。然而&#xff0c;最近我遇到了一个棘手的问题&#xff1a;在测试环境中使用 curl 可以正常访问某个 URL&#xff0c;但在生产环境中却遇到了 SS…...

编程日记 2024/5/27 16:14:32

Lua获取表的长度

1.代码 -- 创建一个表并添加一些元素 local myTable {10, 20, 30, 40}-- 打印表的长度 print(#myTable) -- 输出 4&#xff0c;因为表中有 4 个元素-- 使用 # 来遍历表中的所有元素 for i 1, #myTable doprint(myTable[i]) end -- 这将依次打印 10, 20, 30, 40...

编程日记 2024/5/27 16:11:30

python九九乘法表的打印思考及实现

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、问题引入 九九乘法表的显示需求 二、问题分析 嵌套循环的概念 屏幕宽度与换行的考虑…...

编程日记 2024/5/27 16:10:29

2.Spring中用到的设计模式

Spring框架中使用了多种设计模式来构建其强大且灵活的功能&#xff0c;这里举例说明Spring中的一些功能使用到的设计模式。 工厂模式&#xff1a;Spring容器本质是一个大工厂&#xff0c;使用工厂模式通过BeanFactory和ApplicationContext这两个核心接口来创建和管理bean对象。…...

编程日记 2024/5/27 16:09:28

.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学

需要注意的是&#xff0c;以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片&#xff0c;去阿里库里面匹配&#xff0c;3个信息是否一致&#xff0c;一致则验证通过&#xff0c;需要注意的是&#xff0c;人脸有遮挡&#xff0c;或者刘海&#xff0…...

编程日记 2024/5/27 16:08:27

［大师C语言(第十二篇)］C语言堆排序技术详解

引言 堆排序&#xff08;Heap Sort&#xff09;是一种基于比较的排序算法&#xff0c;它利用堆这种数据结构的特点来进行排序。堆是一种近似完全二叉树的结构&#xff0c;并同时满足堆积的性质&#xff1a;即子节点的键值或索引总是小于&#xff08;或者大于&#xff09;它的父…...

编程日记 2024/5/27 16:07:25

Activity启动流程要点

一、Activity启动流程 Activity的启动流程一般是通过调用startActivity或者是startActivityForResult来开始的startActivity内部也是通过调用startActivityForResult来启动Activity&#xff0c;只不过传递的requestCode小于0Activity的启动流程涉及到多个进程之间的通讯这里主…...

编程日记 2024/5/27 16:06:24

lua 计算第几周

需求 计算当前赛季的开始和结束日期&#xff0c;2024年1月1日周一是第1周的开始&#xff0c;每两周是一个赛季。 lua代码 没有处理时区问题 local const 24 * 60 * 60 --一整天的时间戳 local server_time 1716595200--todo:修改服务器时间 local date os.date("*t…...

编程日记 2024/5/27 16:03:21

嵌入式串口通信效率优化实战

1. 串口通信效率优化背景在嵌入式系统开发中&#xff0c;串口通信是最基础也最常用的外设接口之一。我从事嵌入式开发十多年来&#xff0c;处理过各种串口通信场景&#xff0c;从简单的调试信息输出到复杂的工业控制协议传输。传统串口通信方式在简单场景下工作良好&#xff0c…...

编程新知 2026/4/7 1:15:52

低压无感BLDC方波控制，代码全部源码，方便调试移植，通用性极高，支持ADC方案，最高电转速1...

低压无感BLDC方波控制&#xff0c;全部源码&#xff0c;方便调试移植&#xff01; 1.通用性极高&#xff0c;图片中的电机&#xff0c;一套参数即可启动。 2. ADC方案 3.电转速最高12w 4.电感法和普通三段式 5.按键启动和调速 6.开环&#xff0c;速度环&#xff0c;限流环 7.参…...

编程新知 2026/4/6 23:26:27

Virtuoso ADE L仿真结果分析实战：用Calculator快速提取带宽、相位裕度和噪声

Virtuoso ADE L仿真结果深度解析&#xff1a;从波形到关键指标的实战技巧 面对仿真完成后满屏的波形曲线&#xff0c;许多工程师常陷入"数据丰富但信息匮乏"的困境。本文将聚焦两级运放案例&#xff0c;演示如何用Calculator函数精准提取GBW、相位裕度、噪声谱密度等…...

编程新知 2026/4/6 23:18:06

DeepSeek-OCR-2功能体验：双列可视化界面，左传图右看结果，操作直观

DeepSeek-OCR-2功能体验&#xff1a;双列可视化界面&#xff0c;左传图右看结果&#xff0c;操作直观 1. 为什么这个OCR工具值得一试 如果你经常需要处理扫描文档、PDF文件或者图片中的文字&#xff0c;传统OCR工具可能让你又爱又恨。它们确实能提取文字&#xff0c;但遇到复…...

编程新知 2026/4/6 23:14:05

H-ui.Admin：轻量级后台开发的效率革命方案

H-ui.Admin&#xff1a;轻量级后台开发的效率革命方案 【免费下载链接】H-ui.admin 项目地址: https://gitcode.com/gh_mirrors/hu/H-ui.admin 1. 三大核心价值重新定义管理系统开发 1.1 零门槛上手&#xff1a;从环境配置到功能实现的极速体验 问题&#xff1a;传统…...

编程新知 2026/4/6 23:01:49

终极指南：如何5分钟免费安装Fooocus AI图像生成软件

终极指南&#xff1a;如何5分钟免费安装Fooocus AI图像生成软件 【免费下载链接】Fooocus Focus on prompting and generating 项目地址: https://gitcode.com/GitHub_Trending/fo/Fooocus Fooocus是一款专注于提示词和图像生成的AI图像生成软件&#xff0c;它重新定义了…...

编程新知 2026/4/6 21:52:24

抢救你的数字青春：QQ空间记忆永久保存全攻略

抢救你的数字青春&#xff1a;QQ空间记忆永久保存全攻略 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 当你在整理旧物时偶然翻到泛黄的毕业照&#xff0c;是否会想起QQ空间里那些更鲜…...

编程新知 2026/4/6 21:34:01

Globe.gl性能优化秘籍：如何高效处理大规模卫星数据可视化

Globe.gl性能优化秘籍&#xff1a;如何高效处理大规模卫星数据可视化 【免费下载链接】globe.gl UI component for Globe Data Visualization using ThreeJS/WebGL 项目地址: https://gitcode.com/gh_mirrors/gl/globe.gl Globe.gl是一个基于ThreeJS/WebGL的3D地球数据可…...

编程新知 2026/4/6 20:55:34

OpenClaw+Phi-3-mini-128k-instruct：技术博客自动生成与Hexo部署

OpenClawPhi-3-mini-128k-instruct&#xff1a;技术博客自动生成与Hexo部署 1. 为什么需要自动化技术博客写作 作为一名技术博主&#xff0c;我长期面临一个困境&#xff1a;代码写得多&#xff0c;文章写得少。每次完成一个项目后&#xff0c;明明有很多值得分享的技术细节&…...

编程新知 2026/4/6 19:55:07

别再死记硬背了！用Python+Matplotlib动态可视化5G NR的帧结构与RB资源分配

用Python动态解析5G NR帧结构&#xff1a;从理论到可视化实战 在通信技术快速迭代的今天&#xff0c;5G NR(新空口)作为第五代移动通信的核心技术&#xff0c;其灵活的帧结构设计一直是工程师和研究者关注的焦点。传统学习方式往往依赖静态图表和文字描述&#xff0c;让许多初学…...

编程新知 2026/4/6 19:51:07