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中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- bzoj 1061~1065【Noi2008】解题报告
这次Noi好像格外喜欢树形DpQAQ P.S.好像这次的题都与图有关QAQ bzoj1061[Noi2008]志愿者招募:上下界可行最小费用流 bzoj1062[Noi2008]糖果雨:数形结合&am ...
- mybatis学习（九）——动态sql
MyBatis 的强大特性之一便是它的动态 SQL.可以根据不同条件拼接 SQL 语句. 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似.主要由以下几种元素. if wh ...
- java任务调度Timer简单例子
1.创建类TimerTest import java.util.Timer; import java.util.TimerTask; public class TimerTest { private ...
- [暑假集训--数论]poj2657 Comfort
Description A game-board consists of N fields placed around a circle. Fields are successively number ...
- 关于vue-router路径配置的问题
"/" 表示路由根目录 "/AdminPage" 表示一级路由 如果在一级路由下面配置子路由 "User",表示的意思是 "/Ad ...
- Bzoj2038 小Z的袜子(hose)
Time Limit: 20000MS Memory Limit: 265216KB 64bit IO Format: %lld & %llu Description 作为一个生活散漫 ...
- 【Visual Studio】Windows program compatibility mode is on, turn it off……
[问题描述]Windows 10上安装 Visual Studio Ultimate 2013,出现下面错误: [解决方案]将.iso文件解压到硬盘再安装.
- linux环境内存分配原理 mallocinfo【转】
转自:http://www.cnblogs.com/dongzhiquan/p/5621906.html Linux的虚拟内存管理有几个关键概念: Linux 虚拟地址空间如何分布?malloc和fr ...
- Python入门--18--异常与try，except语句
Python标准异常总结 AssertionError 断言语句(assert)失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF(Ctrl+d) ...
- 推荐！手把手教你使用Git(转)
原文出处: 涂根华的博客 欢迎分享原创到伯乐头条 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放 ...