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对于表单的绑定提供了一 ...
随机推荐
- MyBatis的逆向工程详细步骤操作
1. MyBatis的逆向工程详细步骤操作 @ 目录 1. MyBatis的逆向工程详细步骤操作 2. 逆向工程配置与生成 2.1 MyBatis3Simple:基础版,只有基本的增删改查 2.1.1 ...
- Excel Wps 透视表去重计数方法
Excel Wps 透视表去重计数方法 在处理表格,遇到处理根据某个列去重后统计数量,而不是仅仅统计数量.在网上查找资料,不确定EXCEL或者WPS某个版本可以支持该功能的实现. 折中的方案,分两步来 ...
- c++引用（REFERENCES)
一个例子 void add(int value) { value++; } int main() { int a = 5; LOG(a); add(a); LOG( a); } 在这种情况下,变量a在 ...
- springboot使用mail提示没有该类型的bean
@Autowired private JavaMailSenderImpl javaMailSender; 自动注入时提示没有该类型的Bean. 原因 没有配置邮件发送相关的配置信息. spring: ...
- 日常Bug排查-改表时读数据不一致
前言 日常Bug排查系列都是一些简单Bug的排查.笔者将在这里介绍一些排查Bug的简单技巧,同时顺便积累素材. Bug现场 线上连续两天出现NP异常,而且都是凌晨低峰期才出现,在凌晨的流量远没有白天高 ...
- Prometheus监控系统（一）Prometheus介绍
1. Prometheus简介 Prometheus受启发于Google的Brogmon监控系统(类似kubernetes是从Google的Brog系统演变而来).于2012年以开源形式发布,在201 ...
- hive第三课：Hive函数学习
Hive函数学习 目录 Hive函数学习 SQL练习 Hive 常用函数 关系运算 数值计算 条件函数(主要使用场景是数据清洗的过程中使用,有些构建表的过程也是需要的) 日期函数重点!!! 字符串函数 ...
- Android Camx 架构介绍
Android Camx 架构介绍 原文链接:深入理解高通Camx Hal 概览 高通平台的Camera架构从以前用的mm-camera转向camx-chi,完全是两样不同的东西:软件架构不同.代码位 ...
- yb课堂 前端项目技术组件概述 《三十》
常用的技术组件的作用 学前必备基础:HTML.CSS.JavaScript.Vue基础知识 Vue:用于构建用户界面的渐进式JavaScript框架 什么是Cube-UI 基于Vue.js实现的精致移 ...
- SpringBoot彩蛋之定制启动画面
写在前面 在日常开发中,我们经常会看到各种各样的启动画面.例如以下几种 ① spring项目启动画面 ② mybatisplus启动画面 ③若依项目启动画面 还有很多各式各样好看的启动画面,那么怎么定 ...