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

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

news 2026/3/28 16:58:35

每一个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

别再让死区拖后腿！用MATLAB Simulink给SVPWM逆变器做个精准‘补偿手术’

电力电子工程师实战&#xff1a;用MATLAB Simulink实现SVPWM逆变器的死区补偿 在电力电子系统设计中&#xff0c;死区效应就像电路板上的隐形杀手——它不会立即摧毁你的系统&#xff0c;却会悄无声息地降低整体性能。作为一名长期奋战在电机控制一线的工程师&#xff0c;我见过…...

编程新知 2026/3/28 16:39:29

嵌入式开发必知：如何通过.text、.data和.bss段优化内存使用（附实例分析）

嵌入式开发实战&#xff1a;从.text到.bss的内存优化策略与案例分析 在资源受限的嵌入式系统中&#xff0c;内存优化从来不是可选项&#xff0c;而是生存法则。当你的MCU只有几十KB RAM&#xff0c;而产品功能需求却在不断膨胀时&#xff0c;对内存分区的深入理解就成为了区分普…...

编程新知 2026/3/28 16:25:20

Harness Engineering: 为 AI 搭建可持续迭代环境的实践

在公司内部一个 AIGC页面 Verify 项目(下面代号 HelixVerify )中,我们经历了 114 次版本迭代, 将相对benchmark 的风险样本召回率从 最初的 8% 提升至 98.86%,无风险样本通过率从 36.11% 提升至 54.93%。 **整个 114 次迭代中,基本没有代码是我手写的。**从第一个版本开始,所有…...

编程新知 2026/3/28 13:18:08

Kotaemon在教育培训中的应用：如何构建可信赖的学科答疑助手？

Kotaemon在教育培训中的应用&#xff1a;如何构建可信赖的学科答疑助手&#xff1f; 1. 教育场景中的AI答疑痛点 想象这样一个场景&#xff1a;晚自习教室里&#xff0c;一个学生正为生物作业发愁。他在手机上输入&#xff1a;"光合作用的暗反应发生在叶绿体的哪个部位&…...

编程新知 2026/3/28 12:54:04

OpenClaw+ollama-QwQ-32B自动化写作：从指令到公众号草稿全流程

OpenClawollama-QwQ-32B自动化写作&#xff1a;从指令到公众号草稿全流程 1. 为什么需要自动化写作助手 作为一个技术博主&#xff0c;我每周都要产出2-3篇原创文章。最痛苦的环节不是写作本身&#xff0c;而是那些重复性的准备工作&#xff1a;收集资料、整理格式、调整排版…...

编程新知 2026/3/28 10:20:47

WebGIS驱动的智慧校园导航系统：架构设计与功能实现全解析

1. WebGIS如何让校园导航更智能&#xff1f; 第一次接触校园导航系统是在三年前&#xff0c;当时某高校的IT部门负责人向我吐槽&#xff1a;学生们总在开学季迷路&#xff0c;传统纸质地图根本不够用。这让我意识到&#xff0c;基于WebGIS的智慧导航系统不是锦上添花&#xff0…...

编程新知 2026/3/28 9:44:31

使用VSCode调试TranslateGemma-27B模型调用

使用VSCode调试TranslateGemma-27B模型调用 1. 准备工作与环境配置 在开始调试TranslateGemma-27B模型之前&#xff0c;我们需要先搭建好开发环境。VSCode作为一款轻量级但功能强大的代码编辑器&#xff0c;提供了丰富的调试功能&#xff0c;特别适合深度学习项目的开发调试。…...

编程新知 2026/3/28 9:24:22

当游戏语言成为障碍：如何用XUnity.AutoTranslator打破语言壁垒

当游戏语言成为障碍&#xff1a;如何用XUnity.AutoTranslator打破语言壁垒 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 想象一下&#xff0c;你终于等到了期待已久的日式角色扮演游戏&#xff0c;但打…...

编程新知 2026/3/28 9:04:01

变压器匝间短路这玩意儿仿真起来是真刺激。今儿拿COMSOL折腾了个5%短路模型，从电磁场到噪声一条龙全流程，咱们边撸代码边唠嗑

comsol仿真&#xff0c;变压器匝间短路5%的电磁振动噪声模型 包括电磁场分布&#xff0c;磁密分布&#xff0c;振动形变&#xff0c;噪声分布等结果建模第一步得先让线圈支棱起来。在组件里用参数化曲线画线圈特别实用&#xff1a; # 参数化螺旋线 r 0.5 # 半径(m) pitch 0.…...

编程新知 2026/3/28 7:49:22

蓝桥杯备赛避坑指南：从校赛落选到国三逆袭的实战经验分享

蓝桥杯备赛避坑指南&#xff1a;从校赛落选到国三逆袭的实战经验分享 第一次参加蓝桥杯校赛时&#xff0c;我连最简单的编程题都没能完整写出。看着屏幕上仅完成的两道签到题和一堆未通过的测试用例&#xff0c;那种挫败感到现在都记忆犹新。但正是这次失败&#xff0c;让我后来…...

编程新知 2026/3/28 7:35:18