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对于表单的绑定提供了一 ...
随机推荐
- java8 API 函数式接口
简介 14年,Oracle公司如期发布了Java 8正式版,Java8提供了强大的流式处理及函数式接口编程 函数式接口编程,相信很多人在javascript中都使用过,比如回调函数,如今Java8也吸 ...
- 消息sms 邮箱/手机号/push发送的方案 & 定时任务xxlJob灵活度 & 泛型和发送的模板类设计
消息sms 邮箱/手机号/push发送的方案 & 定时任务xxlJob灵活度 & 泛型和发送的模板类设计 1.消息sms 邮箱/手机号/push发送的方案 1.判断收件人地址是否为空, ...
- 原生js或者是es中让人厌恶的一些地方
js总体来说,是个不错的语言,最大的好处的是简单. 但这个基于es6的一些js也有一些非常怪异的写法,这是非常令人憎恶的地方. c++总体上也算不错,但为什么不是很受欢迎,因为它把自己搞得太复杂了,复 ...
- Python 压缩PDF减小文件大小
压缩 PDF 文件能有效减小文件大小并提高文件传输的效率,同时还能节省计算机存储空间.除了使用一些专业工具对PDF文件进行压缩,我们还可以通过 Python 来执行该操作,实现自动化.批量处理PDF文 ...
- 了解Microsoft Media Foundation
关于Microsoft Media Foundation 是什么 Microsoft Media Foundation是用来处理(创建.修改.传输.合成)多媒体数据(音视频)的一个平台. 有什么用 M ...
- ASP.NET Core使用Hangfire定时发布文章
ASP.NET Core使用Hangfire实现定时任务 前言 也是上了5天班,终于迎来了休息,抽空更新下博客,然后就是下周一公司会对我进行考核,希望考核能通过吧!!! 然后我想给博客添加一个定时发布 ...
- FFmpeg开发笔记（三十三）分析ZLMediaKit对H.264流的插帧操作
<FFmpeg开发实战:从零基础到短视频上线>一书的"3.4.3 把原始的H264文件封装为MP4格式"介绍了如何把H.264裸流封装为MP4文件.那么在网络上传输 ...
- 『vulnhub系列』EVILBOX-ONE
『vulnhub系列』EVILBOX-ONE 下载地址: https://www.vulnhub.com/entry/evilbox-one,736/ 信息搜集: 使用nmap探测内网存活主机,发现开 ...
- 记一次 .NET某网络边缘计算系统 卡死分析
一:背景 1. 讲故事 早就听说过有什么 网络边缘计算,这次还真给遇到了,有点意思,问了下 chatgpt 这是干嘛的 ? 网络边缘计算是一种计算模型,它将计算能力和数据存储位置从传统的集中式数据中心 ...
- 嵌入式入门必看！调试工具安装——基于 AM64x核心板
本章节内容是为评估板串口安装USB转串口驱动程序.驱动适用于CH340.CH341等USB转串口芯片. USB转串口驱动安装 适用安装环境:Windows 7 64bit.Windows 10 64b ...