【vue-5】双向数据绑定v-model及修饰符
单向数据绑定：当数据发生改变时，视图会自动更新，但当用户手动更改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的值…...
[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 清空指纹库 三、总结及资源 一、前言 …...
【java程序设计期末复习】chapter4 类和对象
类和对象 编程语言的几个发展阶段 （1）面向机器语言 计算机处理信息的早期语言是所谓的机器语言，使用机器语言进行程序设计需要面向机器来编写代码，即需要针对不同的机器编写诸如0101 1100这样的指令序列。 （2&#x…...
ios：Command PhaseScriptExecution failed with a nonzero exit code
问题 使用 xcode 跑项目真机调试的时候，一直报错 Command PhaseScriptExecution failed with a nonzero exit code。 解决 最终靠以下方法解决 删除Podfile.lock文件删除Pods文件删除.xcworkspace文件Pod installCommandShiftK 清理一下缓存 亲测有效...
《拯救大学生课设不挂科第四期之蓝桥杯是什么？我是否要参加蓝桥杯？选择何种语言？如何科学备赛？方法思维教程》【官方笔记】
背景： 有些同学在大一或者大二可能会被老师建议参加蓝桥杯，本视频和文章主要是以一个过来人的身份来给与大家一些思路。 比如蓝桥杯是什么？我是否要参加蓝桥杯？参加蓝桥杯该选择何种语言？如何科学备赛？等…...
数据挖掘案例-航空公司客户价值分析
文章目录 1. 案例背景2. 分析方法与过程2.1 分析流程步骤2.2 分析过程1. 数据探索分析2. 描述性统计分析3. 分布分析1.客户基本信息分布分析2. 客户乘机信息分布分析3. 客户积分信息分布分析 4. 相关性分析 3. 数据预处理3.1 数据清洗3.2 属性约束3. 3 数据转换 4. 模型构建4. …...
决策树与机器学习实战【代码为主】
文章目录 🛴🛴引言🛴🛴决策树使用案例🛴🛴numpy库生成模拟数据案例🛴🛴决策树回归问题🛴🛴决策树多分类问题 🛴🛴引言 决策树是一种经…...
从感知机到神经网络
感知机 一、感知机是什么二、用感知机搭建简单逻辑电路2.1 与门2.2 与非门2.3 或门 三、感知机的局限性3.1 异或门3.2 线性和非线性 四、多层感知机4.1 已有门电路的组合4.2 Python异或门的实现 五、感知机模型5.1 感知机模型5.2 感知机损失函数5.3 感知机学习算法 六、感知机原…...
【HMGD】STM32/GD32 I2C DMA 主从通信
STM32 I2C配置 主机配置 主机只要配置速度就行 从机配置 从机配置相同速度，可以设置第二地址 因为我的板子上面已经有了上拉电阻，所以可以直接通信 STM32 I2C DMA 定长主从通信代码示例 int state 0; static uint8_t I2C_recvBuf[10] {0}; stat…...
leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度
leecode 226 翻转二叉树、101 对称二叉树、104 二叉树的最大深度 leecode 226 翻转二叉树 题目链接 ：https://leetcode.cn/problems/invert-binary-tree/description/ 题目 给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。…...
Redux基础
简介 状态管理工具，集中式管理react、vue、angular等应用中多个组件的状态，是一个库,使用之后可以清晰的知道应用里发生了什么以及数据是如何修改，如何更新的 在项目中添加 Redux 并不是必须的,根据项目需求选择是否引入 Redux 三个原则 …...
国外目标公司的任何一个联系人也许都有意义
我们说跟进一个项目，最好能够联系上拥有决策权的人，不然中间隔着几重关系，所有的更新都需要层层审批申报，特别麻烦，总是要等，也许等到最后就是一场空。如果能够直接和老板或者是拍板的人沟通，则…...
因为本地证书太旧或不全导致的 HTTPS 访问失败问题20240520
因为本地证书太旧或不全导致的 HTTPS 访问失败问题 在生产环境中，我们经常需要使用 curl 命令来测试和调试 HTTPS URL。然而，最近我遇到了一个棘手的问题：在测试环境中使用 curl 可以正常访问某个 URL，但在生产环境中却遇到了 SS…...
Lua获取表的长度
1.代码 -- 创建一个表并添加一些元素 local myTable {10, 20, 30, 40}-- 打印表的长度 print(#myTable) -- 输出 4，因为表中有 4 个元素-- 使用 # 来遍历表中的所有元素 for i 1, #myTable doprint(myTable[i]) end -- 这将依次打印 10, 20, 30, 40...
python九九乘法表的打印思考及实现
新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆，收藏下次不迷路┗|｀O′|┛ 嗷~~ 目录 一、问题引入 九九乘法表的显示需求 二、问题分析 嵌套循环的概念 屏幕宽度与换行的考虑…...
2.Spring中用到的设计模式
Spring框架中使用了多种设计模式来构建其强大且灵活的功能，这里举例说明Spring中的一些功能使用到的设计模式。 工厂模式：Spring容器本质是一个大工厂，使用工厂模式通过BeanFactory和ApplicationContext这两个核心接口来创建和管理bean对象。…...
.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学
需要注意的是，以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片，去阿里库里面匹配，3个信息是否一致，一致则验证通过，需要注意的是，人脸有遮挡，或者刘海࿰…...
］C语言堆排序技术详解)
［大师C语言(第十二篇)］C语言堆排序技术详解
引言 堆排序（Heap Sort）是一种基于比较的排序算法，它利用堆这种数据结构的特点来进行排序。堆是一种近似完全二叉树的结构，并同时满足堆积的性质：即子节点的键值或索引总是小于（或者大于）它的父…...
Activity启动流程要点
一、Activity启动流程 Activity的启动流程一般是通过调用startActivity或者是startActivityForResult来开始的startActivity内部也是通过调用startActivityForResult来启动Activity，只不过传递的requestCode小于0Activity的启动流程涉及到多个进程之间的通讯这里主…...
lua 计算第几周
需求 计算当前赛季的开始和结束日期，2024年1月1日周一是第1周的开始，每两周是一个赛季。 lua代码 没有处理时区问题 local const 24 * 60 * 60 --一整天的时间戳 local server_time 1716595200--todo:修改服务器时间 local date os.date("*t…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
协议转换利器，profinet转ethercat网关的两大派系，各有千秋
随着工业以太网的发展，其高效、便捷、协议开放、易于冗余等诸多优点，被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口，具有实时性、开放性，使用TCP/IP和IT标准，符合基于工业以太网的…...