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

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

news 2026/2/10 13:46:10

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/2/9 0:12:12

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40