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中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- TypeToken获取运行时泛型类型
最近正好使用到了Guava的TypeToken来获取泛型的类型信息 比如,泛型父类需要获取其子类定义的泛型类型时: public abstract class GenericClazz<V> ...
- Docker 组件如何协作？
还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...
- OpenStack 通用设计思路
API 前端服务 每个 OpenStack 组件可能包含若干子服务,其中必定有一个 API 服务负责接收客户请求. 以 Nova 为例,nova-api 作为 Nova 组件对外的唯一窗口,向客户暴露 ...
- 【CF314C】Sereja and Subsequences（DP，树状数组）
题意:给定一个N个数的数列,求所有不同不下降子序列的乘积之和,其中不同指的是组成它的数字和长度不完全相同 n (1 ≤ n ≤ 10^5) a[i]<=10^6 思路:考虑DP.设DP[a[i] ...
- C++ 回调函数的简单例子（转）
原文转自 http://blog.csdn.net/wnlwcg/article/details/6930990# 1.调用端 // 下面的这个_stdcall很重要的 void _stdcall T ...
- Beyond compare vs kdiff3
這裡使用的 kdiff3 版本是 0.9.98 基於以下 三點,最終選擇了 beyond compare 1. kdiff3 不能刪檔案, 以下為例,不能刪1 2. kdiff3 ...
- 如何解决div里面img图片下方有空白的问题？
空白产生原因: 图片默认的vertical-align是baseline,(元素放置在父元素的基线上,也就是xx下边距) 一个inline-block元素,如果里面没有inline元素,或者overf ...
- 采集网站特殊文件Meta信息
采集网站特殊文件Meta信息 元(Meta)信息是描述文件的属性的特殊信息,如文件的所有者.联系方式.机构名.邮件地址等信息.而网站中常常会有共享的文档文件,如PDF.Excel.Word.这些文 ...
- CentOS6.7安装部署LNMP(nginx1.8.0+php5.6.10+mysql5.6.12)
IP-10.0.0.8 1.安装nginx mkdir -p /server/tools cd /server/tools yum install -y pcre pcre-devel openssl ...
- CDOJ 3 BiliBili, ACFun… And More! 模拟
原题链接:http://acm.uestc.edu.cn/#/problem/show/3 题意: 有个人在看B站视频时有个习惯,就是每当卡住的时候,他总再次从头开始看.另外,他在看视频时会先等待T的 ...