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

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

news 2025/9/12 15:13:53

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

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/9/7 2:01:42

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/8/24 17:55:00

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/9/4 2:23:45

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2025/9/2 16:50:46

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/9/9 10:07:48

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/9/4 16:30:43

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2025/9/11 11:25:05

Go 并发编程基础：select 多路复用

select 是 Go 并发编程中非常强大的语法结构&#xff0c;它允许程序同时等待多个通道操作的完成&#xff0c;从而实现多路复用机制&#xff0c;是协程调度、超时控制、通道竞争等场景的核心工具。 一、什么是 select select 类似于 switch 语句&#xff0c;但它用于监听多个通…...

编程新知 2025/7/9 4:08:12