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

Vue 表单数据双向绑定 v-mode

news 2026/5/13 5:38:20

每一个Vue项目，每一个系统，肯定涉及到表单的双向数据绑定问题，这一部分是 vue 的重中之重，不是因为知识点复杂，而是因为只要参与 vue 项目的开发，那么就必不可少。

单项绑定 ：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；这样的都是单向绑定。

双向 ：数据变，视图变；视图变（在输入框更新），数据变

v-mode指令，用于表单数据双向绑定，针对以下几种类型：

ext 文本

testarea 多行文本

radio 单选框

checkbox 复选框

select 下拉框

像这样的   

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单数据双向绑定</title>
</head><body><div id="app"><!-- 阻止事件默认行为，当前阻止的是submit --><form action="#" @submit.prevent="submitForm">姓名（文本）：<input type="text" v-model="name"><br><br>性别（单选按钮）：<input type="radio" name="sex" value="1" v-model="sex">男<input type="radio" name="sex" value="0" v-model="sex">女<br><br>技能（多选框）：<input type="checkbox" name="skills" value="java" v-model="skills">java开发<input type="checkbox" name="skills" value="vue" v-model="skills">vue<input type="checkbox" name="skills" value="python" v-model="skills">python<br><br>城市（下拉框）：<select name="citys" v-model="city"><option v-for="c in citys" :value="c.code">{{c.name}}</option></select><br><br>说明（多行文本）: <br><textarea id="" cols="30" rows="5" v-model="desc"></textarea><br><br><button type="submit">提交</button></form></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el: '#app',data: {name: '',sex: '0',  // 默认值为0，它就会选中值为0的，也就是女生。skills: ['vue'], // 复选框被勾选之后会获得数组形式,默认选中vue。citys: [{ code: 'bj', name: '北京' },{ code: 'sd', name: '山东' },{ code: 'sh', name: '上海' },],city: 'sd',desc: '',},methods: {submitForm: function () {// 处理提交表单。// 发送ajax请求异步处理。alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.city + ',' + this.desc)}},})</script></body></html>

相关文章：

Vue 表单数据双向绑定 v-mode

每一个Vue项目&#xff0c;每一个系统&#xff0c;肯定涉及到表单的双向数据绑定问题&#xff0c;这一部分是 vue 的重中之重&#xff0c;不是因为知识点复杂&#xff0c;而是因为只要参与 vue 项目的开发&#xff0c;那么就必不可少。 单项绑定 &#xff1a;数据变&#xff0…...

编程日记 2024/3/30 9:36:08

tab切换组件，可横向自适应滑动

示例图&#xff1a; 注&#xff1a;需要引入Jquery <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.tabs-box {width: 100%;height: auto;}.tab-header-box {display: flex;overflow: hidden…...

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

设计模式---单例模式

目录 一、五种单例模式的实现方式 1.饿汉模式 2.饿汉枚举类型 3.懒汉式 4.双检锁懒汉式 5.内部类懒汉式 二、JDK 中单例的体现 一、五种单例模式的实现方式 1.饿汉模式 public class Singleton1 implements Serializable {private Singleton1() {if (INSTANCE ! null) {thro…...

编程日记 2024/3/30 9:28:01

HarmonyOS 应用开发之启动/停止本地PageAbility

启动本地PageAbility PageAbility相关的能力通过featureAbility提供&#xff0c;启动本地Ability通过featureAbility中的startAbility接口实现。 表1 featureAbility接口说明 接口名接口描述startAbility(parameter: StartAbilityParameter)启动Ability。startAbilityForRes…...

编程日记 2024/3/30 9:25:58

BaseDao封装增删改查

文章目录 什么是BaseDao操作代码增删改查询单个数据查询多个数据 总结 什么是BaseDao BaseDao是&#xff1a; 数据库里负责增加&#xff0c;删除&#xff0c;修改&#xff0c;查询 具体来说是一种接口代码,公共方法的接口类。 在dao层新建basedao,其他dao层接口继承basedao 相…...

编程日记 2024/3/30 9:23:57

Redis入门到实战-第十三弹

Redis入门到实战 Redis中JSON数据类型常见操作官网地址Redis概述JSON常见操作更新计划 Redis中JSON数据类型常见操作 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是…...

编程日记 2024/3/30 9:21:55

深度学习InputStreamReader类

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java SE相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…...

编程日记 2024/3/30 9:18:52

2023年后端面试总结

备注&#xff1a;这篇文章是我在2023年年初在自己的网站上写的&#xff0c;最近在迁移技术文章&#xff0c;我感觉这个也是和咱程序员相关&#xff0c;所以今天就决定把它迁移过来。 .......................................................................分割线..........…...

编程日记 2024/3/30 9:16:50

axios实现前后端通信报错Unsupported Media

使用axios向SpringBoot的后端使用post请求发送数据&#xff0c;发现报错Unsupported Media&#xff0c;最终解决方案如下&#xff1a; 检查变量名字是否一样&#xff0c;即前端传给后端的json数据键名要与后端接收的对象的成员变量名字一致检查Content-Type&#xff0c;post请…...

编程日记 2024/3/30 9:14:48

网络套接字补充——TCP网络编程

六、TCP网络编程 6.1IP地址字符串和整数之间的转换接口 //字符串转整数接口 #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> int inet_aton(const char *cp, struct in_addr *inp); int inet_pton(int af, const char *strptr, …...

编程日记 2024/3/30 9:13:47

Nginx-记

Nginx是一个高性能的web服务器和反向代理服务器&#xff0c;用于HTTP、HTTPS、SMTP、POP3和IMAP协议。因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。 &#xff08;1&#xff09;更快 这表现在两个方面&#xff1a;一方面&#xff0c;在正常情况下&…...

编程日记 2024/3/30 9:10:44

JS面试题：call,apply,bind区别

1. 共同点 三者共同点都是改变函数内部this指向的方法 2. call用法 ini 复制代码 var a 2; var b 2; function func() { console.log(this.a, this.b) } let obj { a: 1, b: 1 } func.call(obj) func.call() 输出结果&#xff1a; 复制代码 1 1 2 2 解析&#xff1…...

编程日记 2024/3/30 9:09:43

Charles抓包配置代理手机连接

Charles下载地址&#xff1a; Charles_100519.zip官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘123云盘为您提供Charles_100519.zip最新版正式版官方版绿色版下载,Charles_100519.zip安卓版手机版apk免费下载安装到手机,支持电脑端一键快捷安装https://www.123pan.com…...

编程日记 2024/3/30 9:08:42

NA555、NE555、SA555和SE555系列精密定时器

这份文件是关于德州仪器&#xff08;Texas Instruments&#xff09;生产的NA555、NE555、SA555和SE555系列精密定时器&#xff08;Precision Timers&#xff09;的数据手册。以下是该文件的核心内容概述&#xff1a; 产品特性&#xff1a; 德州仪器的NA555、NE555、SA555和SE55…...

编程日记 2024/3/30 9:06:39

黑马鸿蒙笔记2

1.图片设置&#xff1a; 1 加载网络图片&#xff0c;申请权限。 申请权限&#xff1a;entry - src - resources - module.json5 2 加载本地图片 ,两种加载方式 API 鼠标悬停在Image&#xff0c; 点击show in API Reference interpolation&#xff1a;看起来更加清晰 resou…...

编程日记 2024/3/30 9:04:38

微信小程序uniapp+vue3+ts+pinia的环境搭建

一.创建uniapp项目 通过vue-cli创建 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project二.安装依赖&#xff1a; 1.pnpm i 2.运行项目&#xff1a; 将package.json的 "dev:mp-weixin": "uni -p mp-weixin",改为 "serve": "u…...

编程日记 2024/3/30 9:03:37

MongoDB聚合运算符：$let

文章目录 MongoDB聚合运算符&#xff1a;$let语法使用举例 MongoDB聚合运算符&#xff1a;$let $let聚合运算符绑定用于表示计算的变量&#xff0c;并返回表达式的结果。 语法 {$let:{vars: { <var1>: <expression>, ... },in: <expression>} }vars 用于在…...

编程日记 2024/3/30 9:02:35

HarmonyOS像素转换-如何使用像素单位设置组件的尺寸。

1 卡片介绍 基于像素单位&#xff0c;展示了像素单位的基本知识与像素转换API的使用。 2 标题 像素转换&#xff08;ArkTS&#xff09; 3 介绍 本篇Codelab介绍像素单位的基本知识与像素单位转换API的使用。通过像素转换案例&#xff0c;向开发者讲解了如何使用像素单位设…...

编程日记 2024/3/30 9:01:34

【前端面试3+1】05v-if和v-show的区别、v-if和v-for能同时使用吗、Vuex是什么？【合并两个有序链表】

一、v-if和v-show的区别 v-if 和 v-show 是 Vue.js 中用来控制元素显示与隐藏的指令。 1.v-if&#xff1a; v-if 是根据表达式的真假值来决定是否渲染元素。当表达式为真时&#xff0c;元素会被渲染到 DOM 中&#xff1b;当表达式为假时&#xff0c;元素不会被渲染到 DOM 中。每…...

编程日记 2024/3/30 8:57:30

Unity WebRequest 变得简单

作者简介： 高科，先后在 IBM PlatformComputing从事网格计算，淘米网，网易从事游戏服务器开发，拥有丰富的C++，go等语言开发经验，mysql，mongo，redis等数据库，设计模式和网络库开发经验，对战棋类，回合制，moba类页游，手游有丰富的架构设计和开发经验。 （谢谢你的关注…...

编程日记 2024/3/30 8:56:29

【仅限首批内测团队获取】AI Agent Serverless标准化交付套件（含Terraform模块+OpenTelemetry追踪模板+合规审计清单）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI Agent Serverless应用的演进逻辑与范式跃迁 AI Agent 与 Serverless 的融合并非技术堆叠&#xff0c;而是计算范式在智能体自治性、事件驱动粒度和资源契约关系三重维度上的结构性重构。早期云函数仅…...

编程新知 2026/5/13 4:47:13

DevOps 与 CI/CD 实战心得：静态网站的自动化部署

背景 自己做了一个独立站项目&#xff0c;访问地址是&#xff1a;https://www.wslwf.com 通过这次实践&#xff0c;对 DevOps 和 CI/CD 在静态网站场景中的应用有了更深的理解。 核心体会 1. 工具链选择至关重要 这次项目使用了 GitHub Actions GitHub Pages&#xff0c;这个组…...

编程新知 2026/5/13 3:26:36

别再只把JWT当登录凭证了！从CTFHub靶场看JWT在API安全与数据交换中的‘双刃剑’效应

JWT安全实战&#xff1a;从CTFHub靶场到企业级API防护的深度解析 在数字化身份认证领域&#xff0c;JSON Web Token&#xff08;JWT&#xff09;早已超越简单的登录凭证角色&#xff0c;成为现代分布式系统的核心组件。当开发者仅将其视为"带签名的Cookie"时&#xf…...

编程新知 2026/5/13 1:21:27

技术指标库 Pandas TA 详细使用手册

Pandas TA 详细使用手册&#xff1a;从入门到精通 一、简介与安装 Pandas TA 是一个专为金融时间序列分析打造的技术分析库&#xff0c;它扩展了 Pandas DataFrame&#xff0c;提供 130 种技术指标、60 种K线形态识别功能。它的核心优势在于与 Pandas 深度集成&#xff0c;让你…...

编程新知 2026/5/12 23:03:41

2026年医疗卫生/护理求职AI工具横评：白衣天使的求职神器大比拼

导语 2026年&#xff0c;医疗卫生行业依然是最具社会价值和就业稳定性的行业之一。随着中国老龄化加速&#xff0c;医护人员需求持续扩大&#xff0c;仅公立医院护士岗位需求量就突破200万。然而&#xff0c;医护求职并不轻松&#xff1a;编制紧张、规培政策复杂、职称考试压力…...

编程新知 2026/5/12 21:13:54

收藏！小白程序员必看：从AI提效到重构产品，企业智能转型4阶段实战指南

本文深入探讨了企业如何拥抱智能时代&#xff0c;通过4个阶段实现AI落地。从提升内部效率开始&#xff0c;逐步激活沉睡数据&#xff0c;重构产品价值&#xff0c;最终形成深场景智能闭环。强调AI不应仅用于替代人工&#xff0c;更要关注为客户创造新价值、提升产品智能化&…...

编程新知 2026/5/12 19:34:56

为Odoo ERP构建安全的AI数据访问层：基于权限治理的语义查询实践

1. 项目概述&#xff1a;为Odoo ERP构建一个受治理的AI数据访问层如果你正在使用Odoo管理企业业务&#xff0c;同时又希望让AI助手&#xff08;比如Claude、Cursor&#xff09;能够安全地查询销售数据、分析库存状况&#xff0c;而不是让它们直接面对你的生产数据库写SQL&#…...

编程新知 2026/5/12 19:28:40

计算机视觉十年演进：从手工特征到工业落地实战

1. 计算机视觉的十年跃迁&#xff1a;从手工特征到端到端理解2012年&#xff0c;AlexNet在ImageNet大赛上以15.3%的错误率碾压第二名10.8个百分点&#xff0c;整个计算机视觉领域像被按下了快进键。那会儿我在实验室调试SIFT特征匹配&#xff0c;光是调一个尺度参数就要跑三小时…...

编程新知 2026/5/12 19:24:32

终极指南：在Windows上轻松安装安卓应用，告别笨重模拟器

终极指南&#xff1a;在Windows上轻松安装安卓应用&#xff0c;告别笨重模拟器 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Windows电脑上运行安卓应…...

编程新知 2026/5/12 17:21:06

实测Taotoken平台API调用稳定性与延迟体感观察记录

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测Taotoken平台API调用稳定性与延迟体感观察记录 在将大模型能力集成到生产应用时&#xff0c;服务的稳定性和响应延迟是开发者关…...

编程新知 2026/5/12 16:47:05