vue之v-model表单绑定
1.背景
2.简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
请输入你的姓名:<input v-model="name">
<br>
你输入的名称为:{{name}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之双向绑定',
name: 'ldp',
number: 60
}
});
</script>
</body>
</html>
3.双向绑定原理
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
原理:
原理很简单,
第一步:使用v-bind给value元素赋值,
第二步:使用v-on:input监听input输入的变化
</pre>
<h4>v-model实现双向绑定</h4>
请输入你的姓名:<input v-model="name">
<br>
你输入的名称为:{{name}}
<hr>
<h4>自己写代码实现双向绑定(v-bind与v-on配合使用就可以了)</h4>
请输入你的姓名:<input v-bind:value="name2" v-on:input="name2=$event.target.value">
<br>
你输入的名称为:{{name2}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之原理',
name: 'ldp',
name2: 'ldp2',
number: 60
}
});
</script>
</body>
</html>
4.单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
请输入你的性别:
<label for="male">
<input id="male" type="radio" v-model="gender" value="1"> 男
</label> <label for="female">
<input id="female" type="radio" v-model="gender" value="2"> 女
</label> <label for="other">
<input id="other" type="radio" v-model="gender" value="3"> 其他
</label> <br>
你输入的性别为:{{gender}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之radio单选框实现',
name: 'ldp',
gender: '',
number: 60
}
});
</script>
</body>
</html>
5.复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
请选择你喜欢的开发语言:
<label for="java">
<input id="java" type="checkbox" v-model="language" value="1"> java
</label> <label for="c">
<input id="c" type="checkbox" v-model="language" value="2"> c
</label> <label for="c++">
<input id="c++" type="checkbox" v-model="language" value="3"> c++
</label> <label for="c#">
<input id="c#" type="checkbox" v-model="language" value="4"> c#
</label>
<br>
你输入的性别为:{{language}}
<hr>
<label for="check">
<input id="check" type="checkbox" v-model="checked"> 请勾选协议
</label>
<br>
你是否勾选了勒:{{checked}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之checkbox复选框实现',
name: 'ldp',
language: [],
checked: false,
number: 60
}
});
</script>
</body>
</html>
6.下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
请选择你出生的月份:
<select v-model="month">
<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
<option value="4">4月</option>
<option value="5">5月</option>
<option value="6">6月</option>
<option value="7">7月</option>
<option value="8">8月</option>
<option value="9">9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
<br>
你选择的月份是:{{month}}
<hr>
请选择你去过的城市:
<select v-model="city" multiple>
<option value="1">成都</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">广州</option>
</select>
<br>
你选择的月份是:{{city}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之select下拉框选择',
month: '',
city: [],
name: 'ldp',
language: [],
checked: false,
number: 60
}
});
</script>
</body>
</html>
7.修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="./js/vue.js"></script>-->
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
请输入你的名字:
<input v-model.lazy="name">
<br>
v-model.lazy失去焦点后在显示:{{name}}
<hr>
请输入你的年龄:
<input type="number" v-model.number="age">
<br>
v-model.number只能输入数字:{{age}}
<hr>
请输入你的家庭地址:
<input v-model.trim="address">
<br>
v-model.trim会去掉首尾空格:{{address}} </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: 'v-model之select下拉框选择',
name: '',
age: null,
address: ''
}
});
</script>
</body>
</html>
完美!
vue之v-model表单绑定的更多相关文章
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- Vue学习笔记之表单绑定
1. 概述 1.1. 什么是数据的双向绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vu ...
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue 学习三 v-model 表单绑定输入 以及修饰符的用处
v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...
- 应用二：Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue -- v-model 表单绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。
Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一 ...
随机推荐
- H5弹窗底层滑动
H5弹窗底层滑动 背景 产品提出H5 弹出窗滑动时,底层页面也会跟随滑动,需要调整禁止底层滑动,增加用户体验. 问题产生原因 ios 滑动时有回弹效果 顶层元素滑动默认行为 解决办法 阻止元素的默认( ...
- 一行超长日志引发的 “血案” - Containerd 频繁 OOM 背后的真相
案发现场:混沌初现 2024年6月10日,本应是平静的一天.但从上午 9 点开始,Sealos 公有云的运维监控告警就开始不停地响.北京可用区服务器节点突然出现大量 "not ready&q ...
- 看李沐的 ViT 串讲
ViT 概括 论文题目:AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 论文地址:https:// ...
- 三屏异显案例分享，基于全国产RK3568J工业平台！
在工业领域中,能否更灵活.更高效地在主屏幕进行主要任务,并在其他副屏幕上进行其他次要任务(例如查看参考资料.监控其他应用程序),一直都是许多工业领域客户面临的刚需,而"多屏异显"功 ...
- NXP i.MX 8M Mini开发板规格书（四核ARM Cortex-A53 + 单核ARM Cortex-M4，主频1.6GHz）
1 评估板简介 创龙科技TLIMX8-EVM是一款基于NXP i.MX 8M Mini的四核ARM Cortex-A53 + 单核ARM Cortex-M4异构多核处理器设计的高性能评估板,由核心板和 ...
- CF1862C 题解
考虑每个木板在水平放置后对每个位置上产生的贡献. 稍微手玩几组样例: 不难发现一个高度为 \(h\) 的木板在水平放置后会是位置 \([1,h]\) 上高度增加 \(1\). 但是高度最大是 \(10 ...
- Math.random()方法的使用及公式
条件1:取n-m范围的随机数(不包含m) 公式1:(int)(Math.random() * (m - n) + n); 条件2:取n-m范围的随机数(包含m) 公式2:(int)(Math.rand ...
- 【一天一点.NET小知识】运用向量Vector<T>加速求和计算
随着 .NET 版本的演进,从 .NET Standard 2.0 版本开始,支持 Vector<T> 类型. Vector<T> 类型:表示指定数值类型(适用于并行算法的低级 ...
- Kolla-ansible部署openStack
目录 Kolla-ansible部署openStack 1. 简介 2. 环境准备 3. 部署 3.1 基础环境配置 3.1.1 配置主机名,所有节点操作,这里以openstack01为例 3.1.2 ...
- oeasy 教您玩转 linux 之 010302 火狐浏览器 firefox
我们来回顾一下 上一部分我们都讲了什么? oneko xeyes 这次看看这个火狐 火狐 看看当前版本 看看是否可以更新 如果需要更新就更新 firefox -v apt search f ...