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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/781018.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql从0到1 —— CRUD/索引/事务

文章目录 1 预备知识1.1 安装1.2 登录 & 退出1.3 配置文件my.cnf 2 基础知识2.1 链接服务器2.2 什么是数据库2.3 基本使用2.3.1创建表2.3.2 插入数据 2.4 服务器、数据库、表的关系2.5 SQL分类2.6 存储引擎 3 Mysql数据库的操作3.1 创建和删除3.2 字符集和校验规则3.3 查看…

javaScript之递归

什么是递归&#xff1f; 递归函数是在一个函数内通过名字调用自身的情况下构成的。 递归的优点 递归可以用来处理循环解决起来比较麻烦的问题 方法&#xff1a; 1&#xff0c;函数自己调用自己 2&#xff0c;找规律&#xff0c;找出这一次和上一次的关系 2&#xff0c;需…

Python数据分析八

一、Python之列表的切片取值 在Python中&#xff0c;我们可以使用切片操作来获取列表中的子集。切片操作使用[start:end:step]的语法&#xff0c;其中start表示起始位置的索引&#xff08;包含&#xff09;&#xff0c;end表示结束位置的索引&#xff08;不包含&#xff09;&a…

这是斗魂大赛?不!是斗美大赛!

最近《绝世唐门》中斗魂大赛正如火如荼地展开&#xff0c;每场对战都十分精彩&#xff0c;令人心潮澎湃&#xff0c;忍不住大喊“过瘾”&#xff01; 除了扣人心弦的打斗场面&#xff0c;新登场的角色们更是颜值爆表&#xff0c;美得令人心动&#xff0c;帅得让人窒息。不得不赞…

准备Python环境学习OpenCV的使用

安装venv模块&#xff0c;执行如下命令&#xff1a; sudo apt-get install python3-venv创建venv环境&#xff0c;命名为images&#xff0c;执行如下命令&#xff1a; python3 -m venv images进入新建的环境images&#xff0c;执行如下命令&#xff1a; cd images source ./…

机器学习模型及其使用方法——《机器学习图解》

本书教你两件事——机器学习模型及其使用方法 机器学习模型有不同的类型&#xff0c;有些返回确定性的答案&#xff0c;例如是或否&#xff0c;而另一些返回概率性的答案。有些以问题的形式呈现&#xff1b;其他则使用假设性表达。这些类型的一个共同点是它们都返回一个答案或…

配置中心apollo==springboot使用apollo

多环境的APOLLO之前已经搭建好了。 新建一个SPRINGBOOT项目 <dependency> <groupId>com.ctrip.framework.apollo</groupId> <artifactId>apollo-client</artifactId> <version>2.2.0</version> </dependency> <?x…

L2-4 部落

在一个社区里&#xff0c;每个人都有自己的小圈子&#xff0c;还可能同时属于很多不同的朋友圈。我们认为朋友的朋友都算在一个部落里&#xff0c;于是要请你统计一下&#xff0c;在一个给定社区中&#xff0c;到底有多少个互不相交的部落&#xff1f;并且检查任意两个人是否属…

实现定时任务

定时任务的实现方式有很多&#xff0c;比如XXL-Job等。但是其实核心功能和概念都是类似的&#xff0c;很多情况下只是调用的API不同而已。 这里就先用SpringBoot为我们提供的定时任务的API来实现一个简单的定时任务&#xff0c;让大家先对定时任务里面的一些核心概念有个大致的…

网络编程(1)写一个简单的UDP网络通信程序【回显服务器】,并且实现一个简单的翻译功能

使用 JAVA 自带的api 目录 一、回显服务器 UdpEchoServer 服务器代码 客户端代码 二、翻译功能 UdpDictServer 在UdpDictServer里重写process方法 一、回显服务器 UdpEchoServer /*** 回显服务器* 写一个简单的UDP的客户端/服务器 通信的程序* 这个程序没有啥业务逻辑&am…

C++中,判断某个自定义结构体是否在该结构体的vector中

demo1源码&#xff1a; #include <iostream> #include <vector> #include <algorithm> using namespace std;struct PushStreamIpAndPort {std::string ip"";int port0;// 重载相等运算符 &#xff1a;可不用bool operator(cons…

TSINGSEE青犀智慧工厂视频汇聚与安全风险智能识别和预警方案

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…

PaddleGAN快速让你的照片动起来

一个不知名大学生&#xff0c;江湖人称菜狗 original author: Jacky Li Email : 3435673055qq.com Time of completion&#xff1a;2024.03.30 Last edited: 2024.03.30 目录 PaddleGAN快速让你的照片动起来 两个方案让照片动起来 方案一&#xff1a;FirstOrder 下载Paddle…

CAPL实现关闭TCP连接的几种方式以及它们的区别

在讲正文前,我们有必要复习下关闭TCP连接的过程:四次挥手。 假设A和B建立TCP连接并进行数据传输,当A的数据发送完后,需要主动发起断开连接的请求: A发送FIN报文,发起断开连接的请求B收到FIN报文后,首先回复ACK确认报文B把自己的数据发送完,发送FIN报文,发起断开连接的…

uniapp中安装vant2

1.uniapp项目搭建 因为是安装vant2所以项目选择vue2&#xff0c;如果vue3项目的话安装vant3 2.安装vant npm i vantlatest-v2 3.在main.js文件引入挂载vant 说明&#xff1a;// #ifndef VUE3这里是vue2模板用来挂载注册组件的地方&#xff1b;// #ifdef VUE3这里是vue3模板…

服务器操作系统有几种?

众所周知&#xff0c;电脑上的一切正常运作都不可缺电脑操作系统的使用&#xff0c;网络服务器做为这种出示服务项目的服务器&#xff0c;或许都是不可 或缺的电脑操作系统。常用的网络服务器电脑操作系统有许多&#xff0c;比如&#xff1a;Windows、Linux、Unix等等&#xff…

Spring Boot简介及案例

文章目录 Spring Boot简介以下是一个简单的 Spring Boot Web 应用实例**步骤 1&#xff1a;创建 Spring Boot 项目****步骤 2&#xff1a;编写 RESTful 控制器****步骤 3&#xff1a;配置主类****步骤 4&#xff1a;运行并测试应用** Spring Boot简介 Spring Boot 是一个用于简…

Linux服务器进程自动停止/终结

记录一个现场问题&#xff1a;Linux服务器中的服务进程莫名被杀死&#xff0c;或者启动失败 情况说明&#xff1a;现场是一台Linux的suse系统服务器&#xff0c;前一天客户反应服务有异常&#xff0c;登录查看发现所有的服务进程都没有启动&#xff0c;以为是客户重启服务器了&…

K8S Pod 水平自动扩缩容 HPA

介绍 HPA&#xff08;Horizontal Pod Autoscaler&#xff09;水平扩缩意味着可根据观察到的CPU、内存使用率或自定义度量标准来自动扩展或缩容Pod的数量&#xff08;Deployment、StatefulSet 或其他类似资源&#xff09;。与“垂直”扩缩不同&#xff0c;对于 K8S&#xff0c;…

canvas跟随鼠标画有透明度的矩形边框

提示&#xff1a;canvas跟随鼠标画有透明度的矩形边框 文章目录 前言一、跟随鼠标画有透明度的矩形边框总结 前言 一、跟随鼠标画有透明度的矩形边框 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…