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对于表单的绑定提供了一 ...
随机推荐
- Shiro 的优点
a.简单的身份认证, 支持多种数据源 b.对角色的简单的授权, 支持细粒度的授权(方法级) c.支持一级缓存,以提升应用程序的性能 d.内置的基于 POJO 企业会话管理, 适用于 Web 以及非 W ...
- idea部署运行tomcat项目方法
在导航栏点击Add Configuration-或者(打开菜单Run->Edit Configuration) 点击+号,选择Tomcat Server ->选择Local->在Na ...
- R 语言入门学习笔记：软件安装踩坑记录——删除所有包以及彻底解决库包被安装到 C 盘用户目录下的问题，以及一些其他需要注意的点
目录 R 语言入门学习笔记:软件安装踩坑记录--删除所有包以及彻底解决库包被安装到 C 盘用户目录下的问题,以及一些其他需要注意的点 软件版本及环境 遇到的问题描述 问题的分析和探究 最终的解决方案 ...
- 高通平台Android设备各种开机模式的进入与退出
原文地址:https://www.cnblogs.com/we-hjb/p/9784659.html 高通方案的Android设备主要有以下几种开机模式,Android.EDL.Fastboot.Re ...
- Ubuntu下的NVIDIA显卡【安装与卸载、CUDA安装】
@ 目录 0. 显卡GPU的基础知识 1. 显卡安装 Optional: 卸载显卡(当你要换显卡的时候) 2. 安装CUDA 碎碎念:主要是把显卡相关的整合出来,基础知识后面再放上来 显卡安装后可以有 ...
- ubuntu22 装物理机
前言 最近需要使用u盘装一个ubuntu物理机,原本想试试麒麟,但还需要申请.. 自己捣鼓半天,终于把ubuntu系统装上了,现在记录一下过程. 正文 下载镜像文件 从官网下载 ubuntu22 的镜 ...
- Vue 处理异步加载顺序问题：在Konva中确保文本在图片之上显示
Vue 处理异步加载顺序问题:在Konva中确保文本在Konva之上显示 在使用Konva开发应用时,我们经常会遇到需要将文本绘制在图片之上的情况.一个常见的问题是,由于图像加载是异步的,文本有时会显 ...
- Mybatis ResultMap复杂对象一对一查询结果映射之association
Mybatis复杂对象映射配置ResultMap的association association:映射到POJO的某个复杂类型属性,比如订单order对象里面包含user对象 表结构 项目结构 pom ...
- Spring(注解方式)简单入门
环境准备 maven jdk Spring Eclipse 项目创建 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0 ...
- windows 安装fvm 安装使用FVM，管理多版本flutter
背景:win10 1,先用clash代理powershell命令,解决网络问题 2.使用dart 安装FVM dart pub global activate fvm 3.安装后检查系统环境变量 3. ...