Vue 学习笔记之 —— 表单输入绑定
Vue 中文文档 https://cn.vuejs.org/
不多说，直接上干货。
v-model 指定，用来在input textarea 等表单元素上创建双向数据绑定，负责监听用户的输入事件，以及更新数据。
1. 文本绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="form1">
<input type="text" v-model="message">
<h3>{{message}}</h3>
</form>
<script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
message: ""
}
})
</script>
</body>
</html>
input中更改文本，h3 里也会相应更改。
2.复选框：
<form action="" id="form1">
<label>
Jack:<input type="checkbox" value="Jack" v-model="checkedNames">
</label>
<label>
John:<input type="checkbox" value="John" v-model="checkedNames">
</label>
<label>
Mike:<input type="checkbox" value="Mike" v-model="checkedNames">
</label>
<br>
<span>{{checkedNames}}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
checkedNames: []
}
})
</script>
多个复选框，绑定到同一个数组，选中，则数组添加该项，反之，则数组删除该项。
3.单选框：
<form action="" id="form1">
<label for="">
boy: <input type="radio" v-model="sex" value="boy">
</label>
<label for="">
girl: <input type="radio" v-model="sex" value="girl">
</label>
<br>
<span>{{sex}}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
sex:""
}
})
</script>
用v-model来代替原本的name即可。
4.选择框：
<form action="" id="form1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
selected:""
}
})
</script>
当然，我们要给option，id值，而此时，我们给data中的selected赋值某一option项的id值，则默认选中此项
<form action="" id="form1">
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form> <script src="../lib/vue.js"></script>
<script !src="">
var Vue = new Vue({
el: "#form1",
data: {
selected: "B"
}
})
</script>
使用v-for 动态渲染：
<form action="" id="form1">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</form>
<script src="../lib/vue.js"></script>
<script !src=""> var Vue = new Vue({
el: "#form1",
data: {
selected:"C",
options: [
{
text: "One", value: "A",
}, {
text: "Two", value: "B",
}, {
text: "Three", value: "C",
}]
}
})
</script>
三种修饰符：
.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
.trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
Vue 学习笔记之 —— 表单输入绑定的更多相关文章
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- VUE：事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Vue（10）表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
- Vue学习笔记之表单绑定输入
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- vue - 计算属性、表单输入绑定
计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...
- No.4一步步学习vuejs之表单输入绑定
基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以 ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
随机推荐
- 初步认识AutoMapper转载 https://www.cnblogs.com/fred-bao/p/5700776.html
初步认识AutoMapper AutoMapper 初步认识AutoMapper 前言 手动映射 使用AutoMapper 创建映射 Conventions 映射到一个已存在的实例对象 前言 通常 ...
- 使用cookie来做身份认证 转载https://www.cnblogs.com/sheldon-lou/p/9545726.html
文章是msdn的官方文档,链接在这里.其实也有中文的文档,这里还是想做一个记录. 文章有asp.net core 2.x 和1.x 版本,我这里就忽略1.x了. 下面先说几点额外的东西有助于理解. A ...
- 2018 ICPC Asia Singapore Regional A. Largest Triangle (计算几何)
题目链接:Kattis - largesttriangle Description Given \(N\) points on a \(2\)-dimensional space, determine ...
- PAT甲级——A1141 PATRankingofInstitution【25】
A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the ...
- 数据持久化之Android文件系统（一）
阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680 一.前言 文件系统一直是Android开发过程中经常接触的东西.而关于内 ...
- [已解决]报错: Version in docker-compose is unsupported
docker compose将解析版本为"2",而不是"3.3".应该改为: version: "2"
- apache的commons-fileupload中FileItem类和ServletFileUpload
FileItem类的常用方法 1.boolean isFormField().isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段,还是一个文件表单字 ...
- vue组件库的基本开发步骤
市面上目前已有各种各样的UI组件库,比如 Element 和 iView,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的 ...
- zookeeper常用配置详解
#ZK中的一个时间单元.ZK中所有时间都是以这个时间单元为基础,进行整数倍配置的.例如,session的最小超时时间是2*tickTime tickTime=2000 #Follower在启动过程中, ...
- tomcat的首次登录配置
登录tomcat时需要输入账号密码,而账号密码需要在配置文件中配置好才能使用. 此处我们先点击取消,tomcat会弹出一个提示界面: 这个界面的大致意思是: 401未经授权 您无权查看此页面. 如果您 ...