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对于表单的绑定提供了一 ...
随机推荐
- injectionIII iOS代码注入工具（上）
injectionIII iOS代码注入工具(上) 前言 如果之前用过injection的朋友一定会对其热重载的特性印象深刻,如今injection经过多次更新,现在以injectionIII之名上架 ...
- .NET6 个人博客-推荐文章加载优化
个人博客-推荐文章加载优化 前言 随着博客文章越来越多,那么推荐的文章也是越来越多,之前推荐文章是只推荐8篇,但是我感觉有点少,然后也是决定加一个加载按钮,也是类似与分页的效果,点击按钮可以继续加载8 ...
- ffmpeg 学习：主要结构体之间关系
背景 学习例程源码的时候,搞不清楚各结构体之间是什么含义. 解析 FFmpeg 有多个重要的结构体,解协议,解分装,解码,解封装. 解协议: http,rstp,rtmp,mms. AVIOConte ...
- Linux 提权-Docker 容器
本文通过 Google 翻译 Docker Breakout – Linux Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注释补充. ...
- java开发webservice报Service(URL, QName, WebServiceFeature[]) is undefined错误的解决方法
Description Resource Path Location TypeThe constructor Service(URL, QName, WebServiceFeature[]) is u ...
- 机器学习策略篇：详解如何使用来自不同分布的数据，进行训练和测试（Training and testing on different distributions）
如何使用来自不同分布的数据,进行训练和测试 深度学习算法对训练数据的胃口很大,当收集到足够多带标签的数据构成训练集时,算法效果最好,这导致很多团队用尽一切办法收集数据,然后把它们堆到训练集里,让训练的 ...
- 原创软件 | 系统服务工具箱原创软件（587KB）--基于aardio开发的第一个程序
1 系统服务工具箱简介 该软件是我使用aardio开发的第一个程序,它集成了多个系统常用的快捷键,无需记住各种命令就能快捷使用cmd管理员.计算机管理.控制面板.组策略.注册表.服务.任务管理.卸载程 ...
- 24 年 “年薪百万” 的 Java 程序员，都要学什么？
大家好,我是程序员鱼皮.前几天我看了一篇由国外的 Java 架构师大佬分享的文章,主题是 "Java 架构师必会的 20 个技术". 光看这个标题,就知道在国外做 Java 开发, ...
- git将某个开发分支最近的提交合并成一个提交
你可以使用 `git merge --squash` 命令将某个开发分支最近的提交合并成一个提交. 具体步骤如下: 1. 切换到你想要合并的分支上,比如 `develop` 分支: `git chec ...
- vscode配置项
因为vscode的默认配置,导致现在用的不是很舒服.总结了以下配置能让你的vscode用着更舒服. 1: 问题: 输入log按tab快速生成代码后,提示居然没了? 解决方案: "editor ...