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

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

news 2026/5/24 5:49:04

单向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改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及修饰符

单向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改input的值，数据不会自动更新； 双向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改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 类和对象

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

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

ios：Command PhaseScriptExecution failed with a nonzero exit code

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

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

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

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

编程日记 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

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

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

编程日记 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配置主机配置主机只要配置速度就行从机配置从机配置相同速度，可以设置第二地址因为我的板子上面已经有了上拉电阻，所以可以直接通信 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 翻转二叉树题目链接 ：https://leetcode.cn/problems/invert-binary-tree/description/ 题目给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。…...

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

Redux基础

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

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

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

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

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

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

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

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

Lua获取表的长度

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

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

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

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

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

2.Spring中用到的设计模式

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

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

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

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

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

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

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

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

Activity启动流程要点

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

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

lua 计算第几周

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

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

Spark Transformer：稀疏化技术提升大模型计算效率

1. Spark Transformer架构解析在深度学习领域，Transformer模型已经成为自然语言处理和多模态任务的事实标准架构。然而，随着模型规模的不断扩大和序列长度的持续增长，计算效率问题日益突出。2025年提出的Spark Transformer通过创新性地重新激…...

编程新知 2026/5/24 2:51:12

LLM结构化输出工程：让AI返回你想要的格式

为什么结构化输出是工程化的核心需求 “直接问模型，它会告诉你答案”——这在原型阶段没问题。但在生产系统中，你的下游代码需要的不是一段流畅的自然语言，而是可解析的、格式固定的结构化数据。一个用户信息提取API，调用方期望拿…...

编程新知 2026/5/24 2:28:18

别再只用MaxPool了！试试在YOLOv9里集成Haar小波下采样(HWD)，实测涨点还省显存

突破传统下采样瓶颈：YOLOv9集成Haar小波下采样的实战指南当你在训练YOLOv9模型时，是否遇到过这样的困境——为了提升检测精度而增加模型复杂度，却发现显存迅速耗尽；或是采用激进的下采样策略后，小目标检测性能明显下降…...

编程新知 2026/5/24 1:58:25

《离别的最后》的内容入口：收尾场景如何被记住

从内容传播角度看，《离别的最后》的入口在“最后”这个收束动作。它不是笼统告别，而是写到一段关系、一个阶段或一次转身即将落下尾音的时刻。这首歌不适合被写成普通伤感推荐。更准确的角度，是把它放在收尾场景里：删掉草稿、收起…...

编程新知 2026/5/24 0:34:27

效率直接起飞！2026年最值得信赖的专业AI论文软件

2026年AI论文写作工具已从“内容生成”升级为智能学术辅助系统，核心评价维度包括文献真实性、格式合规性、长文本逻辑、查重降重、AIGC合规与多语言支持。本次测评覆盖6款主流工具，测试场景涵盖中英文论文、全流程与专项功能、免费与付费版本&#xff0c…...

编程新知 2026/5/24 0:14:20

SSH安全加固：禁用弱加密算法的实操指南

1. 为什么禁用弱加密算法不是“可选项”，而是SSH上线前的必过门槛我第一次在客户现场接手一台刚部署的CentOS 7跳板机时，安全扫描报告里赫然标红了三条：ssh-rsa签名算法被标记为CRITICAL，diffie-hellman-group1-sha1密钥交换被判定…...

编程新知 2026/5/23 23:20:52

【混合可再生能源模拟】使用遗传算法优化光伏板和电池的容量附matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、程序设计科研仿真。🍎完整代码获取定制创新论文复现点击：Matlab科研工作室👇 关注我领取海量matlab电子书和数学建模资料 &#x1f3…...

编程新知 2026/5/23 22:08:24

UNT413A刷机后体验：开机无广告、流畅度飙升，这波操作值不值？

UNT413A刷机实战：从广告轰炸到极简流畅的蜕变之旅每次打开电视盒子，那段无法跳过的30秒广告就像一场无法避免的仪式。更糟的是，系统卡顿得像是被胶水黏住，预装软件占据了宝贵的存储空间，而官方更新只会让情况变得更糟…...

编程新知 2026/5/23 21:55:05

大模型赋能金融行业：应用场景、现实挑战与应对策略

大模型技术在金融领域的应用日益深入，成为行业变革的重要驱动力，有助于降本增效、提升客户体验、赋能风险管理、促进业务创新和助力数字化转型。然而，金融行业应用大模型仍面临高质量数据不足、算力紧缺、技术缺陷、人才短缺及隐私安全等挑战…...

编程新知 2026/5/23 21:25:41

2026跨境实测｜主流国产AI视频生成工具图生视频功能深度测评

在TikTok、Shopee、亚马逊短视频带货常态化的2026年，跨境商家的核心痛点早已不是不会拍视频，而是量产难、成本高、画面违和、适配海外场景差。传统真人拍摄、外包剪辑模式，不仅耗时耗力，还难以跟上跨境平台的流量更新节奏。而AI视…...

编程新知 2026/5/23 20:08:35

相关文章：