vue 表单输入与绑定 v-model
vue使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。下面我们通过示例先了解下基本用法：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue表单输入与绑定--基础用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head> <body>
<div class="myApp">
<!-- 文本的输入与绑定 -->
<p>文本的输入与绑定:</p>
<input type="text" v-model="msg" placeholder="请输入">
<p>输入的文本是：{{msg}}</p>
<!-- 多行文本的输入与绑定 -->
<p>多行文本的输入与绑定:</p>
<textarea v-model="multiMsg" placeholder="请输入"></textarea>
<p>输入的文本是：{{multiMsg}}</p>
<!-- 单个复选框 -->
<p>单个复选框</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!-- 多个复选框 -->
<p>多个复选框</p>
<div>
<input type="checkbox" id="banana" value="香蕉" v-model="fruits">
<label for="banana">香蕉</label>
<input type="checkbox" id="apple" value="苹果" v-model="fruits">
<label for="apple">苹果</label>
<input type="checkbox" id="pear" value="鸭梨" v-model="fruits">
<label for="pear">鸭梨</label>
</div>
<p>当前选中的水果为：{{fruits}}</p>
<!-- 单选按钮 -->
<p>单选按钮：</p>
<div>
<input type="radio" id="bmw" value="宝马" v-model="cars">
<label for="bmw">宝马</label>
<input type="radio" id="benz" value="奔驰" v-model="cars">
<label for="benz">奔驰</label>
<input type="radio" id="audi" value="奥迪" v-model="cars">
<label for="audi">奥迪</label>
</div>
<p>当前选中的品牌为：{{cars}}</p>
<!-- 下拉选框 -->
<p>下拉选框</p>
<div>
<select v-model="dogs">
<option disabled value="">请选择</option>
<option>泰迪</option>
<option>雪纳瑞</option>
<option>杜宾</option>
</select>
</div>
<p>你喜欢的狗狗是：{{dogs}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
msg: '',
multiMsg: '',
checked: false,
fruits: [],
cars: '',
dogs: '',
selected: 'selected'
}
});
</script>
</body> </html>
基础用法中，使用的数据都是写死的数据，是静态的，但是有时候，有些需求需要展示接口请求过来的动态数据，这时候，怎么绑定表单数据呢，下面我们也是通过代码示例来看看怎么动态进行值绑定：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue表单输入与绑定--值绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head> <body>
<div class="myApp">
<!-- 复选框 -->
<input type="checkbox" v-model="toggle" id="toggleInput" true-value="yes" false-value="no">
<label for="toggleInput">点击切换显示下方绑定的值</label>
<p>绑定的值为：{{toggle}}</p>
<!-- 单选按钮 -->
<input type="radio" v-model="pick" v-bind:value="fruits" id="fruits">
<label for="fruits">点我一下</label>
<p>我喜欢吃：{{pick}}</p>
<!-- 下拉选框 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option v-for="items in flowers" v-bind:value="items.meaning">{{items.name}}</option>
</select>
<p>选择花名提示花语 {{selected}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
toggle: '',
pick: '',
fruits: '苹果梨',
selected:'',
flowers: [{
name:'玫瑰',
meaning:'爱情',
},
{
name:'百合',
meaning:'纯洁',
},
{
name:'康乃馨',
meaning:'母爱',
}]
}
});
</script>
</body> </html>
上面就是绑定动态值的示例，最后来看一下修饰符，v-model有三个修饰符，.lazy、.number、.trim，下面看下用法：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue表单输入与绑定--修饰符</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head> <body>
<div class="myApp">
<p>.lazy，使用这个修饰符，绑定的值不会在输入事实时更新，而是在change事件触发时更新，即失去焦点的时候更新</p>
<input v-model.lazy="msg">
<p>输入的内容为：{{msg}}</p>
<p>.number，使用number修饰符，输入的内容如果不是数字类型，不会更新，而且当鼠标失去焦点时，输入的内容也会清空，只有输入数字类型才可以更新显示</p>
<input v-model.number="age">
<p>年龄为：{{age}}</p>
<p>.trim，使用trim修饰符，自动过滤用户输入的首尾空白字符</p>
<input v-model.trim="text">
<p>文本内容为：{{text}}</p>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
msg: '',
age: 18,
text: ''
}
});
</script>
</body> </html>
vue 表单输入与绑定 v-model的更多相关文章
- vue表单输入的绑定
vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- Vue表单输入绑定
<h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
- vue 表单输入绑定 checkbox
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- [CODEVS1915] 分配问题（最小费用最大流）
传送门 脑残题 建图都懒得说了 ——代码 #include <queue> #include <cstdio> #include <cstring> #includ ...
- ROS学习网址【原创】
ROS学习网址 http://www.ros.org/ http://www.ros.org/news/book/ http://wiki.ros.org/ http://blog.exbot.net ...
- 驱动12.移植dm9000驱动程序
1 确定相异性 1.1 选中网卡芯片nGCS4 1.2 确定相异性:基地址,中断号,设置时序(内存控制器BWSCON,BANKCONn) 1.3 修改相应的部分 2 测试DM9000C驱动程序:2.1 ...
- LightOJ 1140： How Many Zeroes? （数位DP）
当前数位DP还不理解的点: 1:出口用i==0的方式 2:如何省略状态d(就是枚举下一个数的那个状态.当然枚举还是要的,怎么把空间省了) 总结: 1:此类DP,考虑转移的时候,应当同时考虑查询时候的情 ...
- Unsafe in Java
http://www.cnblogs.com/xrq730/p/4976007.html http://www.importnew.com/14511.html http://blog.csdn.ne ...
- Spring Tool Suite(STS)安装
Spring Tool Suite是一个基于Eclipse的开发环境,可以自定义用于开发Spring应用程序.它提供了一个随时可用的环境来实现,调试,运行和部署Spring应用程序,包括Pivotal ...
- 2017 ACM-ICPC 北京区域赛记录
------------------------------------------------------------------------------ 出发日 拖着一个大箱子走是真的累. 下午三 ...
- HDU 4912 Paths on the tree（LCA+贪心）
题目链接 Paths on the tree 来源 2014 多校联合训练第5场 Problem B 题意就是给出m条树上的路径,让你求出可以同时选择的互不相交的路径最大数目. 我们先求出每一条路径 ...
- Spring Cloud服务的注册与发现
Spring Cloud简介: Spring Cloud为开发人员提供了快速构建分布式系统中的一些通用模式(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举,分 ...
- 扩展欧几里得算法(exGCD)学习笔记
@(学习笔记)[扩展欧几里得] 本以为自己学过一次的知识不会那么容易忘记, 但事实证明, 两个星期后的我就已经不会做扩展欧几里得了...所以还是写一下学习笔记吧 问题概述 求解: \[ax + by ...