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中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- webpack错误Chunk.entry was removed. Use hasRuntime()
这个错误在从webpack1升级webpack2或webpack3时候都遇到了,起初查到的都是extract-text-webpack-plugin版本的问题,升级了还是不管用.搜索引擎上查不到其他的 ...
- 刷题总结——单旋（HNOI2017 bzoj4825）
题目: Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据 结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 ...
- .sh 和 .ksh —— 三种主要的 Shell简介（Korn shell）
和现在的开发语言一样,语法上有些差异! 三种主要的 Shell 与其分身 在大部份的UNIX系统,三种著名且广被支持的shell 是Bourne shell(AT&T shell,在 Linu ...
- Java面试题之多线程同步和互斥有几种实现方法，都是什么？
线程同步是指线程之间所具有的一种制约关系,一个线程的执行依赖另外一个线程的消息,当它没有得到另一个线程的消息时应等待,直到消息到达时才被唤醒. 线程互斥是指对于共享的进程系统资源,每个线程访问时的排他 ...
- es6总结（四）--对象
- 反汇编->C++虚函数深度分析
先来查看一简单例子 #include<iostream> using namespace std; class Base{ public: virtual void f() { cout ...
- 二、 java中的变量与数据类型及类型转换
标识符:凡是可以自己命名的地方都叫标识符,如:类名.方法名.接口名... 1.标识符命名的规则: 由26个英文字母大小写,0-9,_或$组成,不遵守会报错. 不可以用数字开头. 不能使用关键字和保留字 ...
- Java 异常处理的优劣
Java编程中的异常处理是一个很常见的话题了,几乎任何一门介绍性的Java课程都会提到异常处理.不过,我认为很多人其实没有真正掌握正确处理异常情况的方法和策略,最多也就不过了解个大概,知道概念.我想对 ...
- Chelly的串串专题
CF149E 题意:给出一个长度为n的文本串和m个模式串,求有多少个模式串可以拆成两半,使得这两半按顺序匹配(n<=2e5,m<=100) 最暴力的想法就是对于每个询问串,全部和原串做一遍 ...
- HDU5618 Jam's problem again
CDQ分治模板题 #include<cstdio> #include<cctype> #include<algorithm> #include<cstring ...