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中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
随机推荐
- babel吐槽
1. .babelrc文件无法复制 每次复制项目文件,.babelrc文件都会丢失,导致项目的ES6莫名的编译失败,最可能出现的错误就是Unexpected token import错误,import ...
- APUE 学习笔记(五) 进程环境
1.main函数 C程序总是从main函数开始执行,当内核执行C程序时,在调用main函数之前先调用exec函数从内核获取命令行参数和环境变量值 2.进程终止 正常终止: (1)在main函数内执 ...
- Manjaro中源码安装gcc7.1
刚刚gcc 7.1也出来了,想在使用熟悉的linux下试试,特记录如下: 准备必要的系统环境:(升级系统到最新,安装必要的工具) pacman -Syyu ...
- PHPCMS内链设置,PHPCMS关联链接设置
需求: 在网站中的关键词,自动加上链接. 在PHPCMS中叫做“关联链接”,在DEDECMS中叫做TAG标签. 第1步:后台 -> 扩展 -> 关联链接 -> 添加关联链接: 第2步 ...
- Python远程视频监控程序
老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人.o(>﹏<)o||| 最初我的想法是直接去网上下个软件,可是找来找去不是有毒就是收费,无奈技 ...
- [原创][FPGA][IP-Core]altlvds_tx & altlvds_rx
1. 概述 Alter公司的QuartusII软件提供了LVDS发送和接收的IP核供我们使用,其在本质上可以理解为并行-串行数据的转换器.其在官方文档(见附件)上也这样说过.其中的应用场景有告诉AD/ ...
- spring容器初始化bean和销毁bean之前进行一些操作的定义方法
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种,通过在xml中定义init-method和destory-method方法 第二种, ...
- Akka简介与Actor模型
Akka是一个构建在JVM上,基于Actor模型的的并发框架,为构建伸缩性强,有弹性的响应式并发应用提高更好的平台.本文主要是个人对Akka的学习和应用中的一些理解. Actor模型 Akka的核心就 ...
- 如果当前地图文档中有独立的Table，通过Engine如何获取该Table？
将IMap转为ITableCollection,通过ITableCollection.get_Table(int index);来获取该Table
- Android -- native关键字
native关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过JNI接口 ...