Vue.js 学习笔记 第6章 表单与v-model
本篇目录:
表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model
完成表单的数据双向绑定。
6.1 基本用法
表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model
指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。
例如下面的例子:
<div id="app">
<input type="text" v-model="message" placeholder="请输入...">
<p>输入的内容是:{{message}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
在输入框输入的同时,{{message}}
也会实时将内容渲染在视图中。
如图6-1所示:

对于文本域<textarea>
也是同样的用法:
<div id="app">
<textarea v-model="text" placeholder="请输入..."></textarea>
<p>输入的内容是:</p>
<p style="white-space: pre;">{{text}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
text: ""
}
});
</script>
提示:
提示v-model
后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value
属性,对于在<textarea></textarea>
之间插入的值,也不会生效。
使用v-model
时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发鞥新。
如果希望总是实时更新,可以用@input
来替代v-model
。
事实上,v-model
也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。
例如下面的示例:
<div id="app">
<input type="text" @input="handleInput" placeholder="请输入...">
<p>输入的内容是:{{message}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
message: ""
},
methods: {
handleInput: function(event) {
this.message = event.target.value;
}
}
});
</script>
来看看更多的表单控件。
单选按钮:
单选按钮在单独使用时,不需要v-model
,直接使用v-bind
绑定一个布尔类型的值,为true
时选中,为false
时不选。
例如:
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div> <script>
var app = new Vue({
el: "#app",
data: {
picked: true
}
});
</script>
如果是组合使用来实现互斥选择的效果,就需要v-model
配合value
来使用:
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label> <input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label> <input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label> <p>您选择的是:{{picked}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
picked: "js"
}
});
</script>
数据picked
的值与表单按钮的value
值一致时,就会选中该项,所以当前状态下选中的是第二项。
如图6-2所示:

复选框:
复选框也分单独使用和组合使用,不过用法稍与单选不同。
复选框单独使用时,也是用v-model
来绑定一个布尔值。
例如:
<div id="app">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态:{{checked}}</label>
</div> <script>
var app = new Vue({
el: "#app",
data: {
checked: false
}
});
</script>
在勾选时,数据checked
的值改为了true
,<label>
中渲染的内容也会更新。
组合使用时,也是v-model
与value
一起,多个勾选框都绑定到同一个数组类型的数据,value
的值在数据当中,就会选中这一项。
这一过程也是双向的,在勾选时,value
的值也会自动push
到这个数组中。
实例代码如下:
<div id="app">
<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>你选择的是:{{checked}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
checked: ["html", "css"]
}
});
</script>
当前状态下的结果如图6-3所示:

选择列表:
选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选和多选两种方式。
先看一下单选的示例代码:
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>你选择的是:{{selected}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
selected: "html"
}
});
</script>
<option>
是备选项,如果含有value
属性,v-model
就会优先匹配value
的值;
如果没有,就会直接匹配<option>
的text
。
比如选中第二项时,selected
的值为js
,而不是JavaScript
。
给<select>
添加属性multiple
就可以多选了,此时v-model
绑定的是一个数组,与复选框用法类似。
实例代码如下:
<div id="app">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>你选择的是:{{selected}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
selected: ["html", "js"]
}
});
</script>
在业务中,<option>
经常用v-for
动态输出,value
和text
也是用v-bind
来动态输出的。
例如:
<div id="app">
<select v-model="selected">
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
<p>你选择的是:{{selected}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
options: [
{text:"HTML", value:"html"},
{text:"JavaScript", value:"js"},
{text:"CSS", value:"css"},
],
selected: "html"
}
});
</script>
虽然用选择列表<select>
控件可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,,比如不支持搜索,所以常见的解决方案是用<div>
moi一个类似的控件。
当阅读完第7章组件的内容后,可以尝试编写一个下拉选择器的通用组件。
6.2 绑定值
上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下,v-model
绑定的值是一个静态字符串或布尔值。
但在业务中,有时需要绑定一个动态的数据,这时可以用v-bind
来实现。
单选按钮:
<div id="app">
<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
picked: false,
value: 123
}
});
</script>
在选中时,app.picked===app.value
,值都是123
。
复选框:
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>复选框</label>
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
toggle: false,
value1: "a",
value2: "b"
}
});
</script>
勾选时,app.toggle===app.value1
;
未勾选时,app.toggle===app.value2
。
选择列表:
<div id="app">
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
{{selected.number}}
</div> <script>
var app = new Vue({
el: "#app",
data: {
selected: ""
}
});
</script>
当选中时,app.selected
是一个Object,所以app.selected.number===123
。
6.3 修饰符
与事件的修饰符类似,v-model
也有修饰符,用于控制数据同步的时机。
.lazy:
在输入框中,v-model
默认是在input
事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。
使用修饰符.lazy
会转变为在change
事件中同步,示例代码如下:
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{message}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
这是,message
并不是实时改变的,而是在失焦或按回车时才更新。
.number:
使用修饰符.number
可以将输入转换为Number类型,否则虽然你输入的是数字,但它的类型其实是String。
比如在数字输入框时会比较有用,示例代码如下:
<div id="app">
<input type="number" v-model.number="message">
<p>{{typeof message}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
message: 123
}
});
</script>
.trim:
修饰符.trim
可以自动过滤输入的首尾空格,示例代码如下:
<div id="app">
<input type="text" v-model.trim="message">
<p>{{message}}</p>
</div> <script>
var app = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
从Vue.js 2.x开始,v-model
还可以用于自定义组件,满足定制化的需求,在第7章会详细介绍。
Vue.js 学习笔记 第6章 表单与v-model的更多相关文章
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- Vue.js 学习笔记 第1章 初识Vue.js
本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...
- Vue.js 学习笔记 第4章 v-bind 及 class与style绑定
本篇目录: 4.1 了解v-bind指令 4.2 绑定class的几种方式 4.3 绑定内联样式 DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定cl ...
- Vue.js 学习笔记 第3章 计算属性
本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存 模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
随机推荐
- SpringCloud实战-Hystrix线程隔离&请求缓存&请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- 设计模式之策略模式(Strategy Pattern)
模板方法是通过继承实现的,在父类中定义出算法的骨架,将不同点在子类中实现.而策略模式是通过接口实现的,策略中定义了完整的算法.它们有点像啊-- 策略模式的定义 策略模式(Strategy Patter ...
- CSS伪类详情
参考:http://blog.csdn.net/Panda_m/article/details/50084699
- ActiveX、OLE和COM的关系(转自百度文档)
比较流行的组件模型有COM(Component Object Model,对象组件模型)/DCOM(Distributed COM,分布式对象组件模型)和CORBA(Common Object Req ...
- 找不到 blog.csdn.net 的服务器 DNS 地址
找不到 blog.csdn.net 的服务器 DNS 地址 csdn的博客用win7的电脑打不开是怎么回事?手机可以正常打开,csdn的bbs 下载什么的都可以正常使用. blog.csdn.net显 ...
- Thymeleaf利用layout.html文件生成页面布局框架
1.layout.html文件 生成布局 <!DOCTYPE html> <html lang="zh-CN" xmlns:th="http://www ...
- java 泛型详解(普通泛型、 通配符、 泛型接口,泛型数组,泛型方法,泛型嵌套)
JDK1.5 令我们期待很久,可是当他发布的时候却更换版本号为5.0.这说明Java已经有大幅度的变化.本文将讲解JDK5.0支持的新功能-----Java的泛型. 1.Java泛型 其实Java ...
- python取txt文件的若干行到另一个文件
取movie.txt文件的若干行到movie2.txt #取txt文件 的若干行到另一个txt f1 = open(r'F:\movie.txt','rb') f2= open(r'F:\movie2 ...
- 关于SELinux
出现背景以及发展历程 SELinux是「Security-Enhanced Linux」的简称,是美国国家安全局「NSA=The National Security Agency」 和SCC(Secu ...
- bzoj5342 CTSC2018 Day1T3 青蕈领主
首先显然的是,题中所给出的n个区间要么互相包含,要么相离,否则一定不合法. 然后我们可以对于直接包含的关系建出一棵树,于是现在的问题就是给n个节点分配权值,使其去掉最后一个点后不存在非平凡(长度大于1 ...