vue的表单的简单介绍 input radio checkbox等表单特性
在vue中我们可以通过v-model来为表单元素实现双向绑定
1:v-model指令
数据的双向绑定
双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模型中的数据(M)
通常来说双绑定应用在表单中比较多
指令: vue对html元素拓展是一些属性名称(自定义属性名称)
Vue指令有个特点,都是以v-开头的
V-model,它提供了一个js环境,在他的属性之中我们可以使用js(vue实例化对象)中的变量,将表单元素的值与vue实例化对象中是数据属性同步,实现视图到模型中的数据的一个绑定,因此在表单元素上添加了v-model就实现一种双向绑定
<div id="app">
<input type="text" v-model="msg">
<h1>{{msg }}</h1>
</div>
var myData = {
// 插入的文本
msg: ''
};
// 创建vue对象
var app = new Vue({
el: '#app',
data: myData
})
//实现了input输入内容和h1的双向绑定
2:单选或者多选
它不允许我们输入,只允许我们点击是否被选中
元素属性(checked)的优先级要高于vue实例化对象中数据属性值(适用于所有表单元素)
(1)多选
将checkbox的值写入一个变量中,变量中的每一个属性对应一个checkbox的值
当值是false,多选框不会被选中
注意:在判断值会做类型转换(0 ‘’, null, undefined, NaN, false)都是false
当值是true,多选框会被选中
Eg:
<label>S<input type="checkbox" v-model="size.S"></label>
<label>M <input type="checkbox" v-model="size.M" ></label>
<label>L <input type="checkbox" v-model="size.L"></label>
<label><input type="checkbox" v-model="size.XL" v-bind:true-value="big" v-bind:false-value="'small'"></label> //'small'是字符串 big变量
<p>{{size | json}}</p> //json对象数据转化成一个json字符串
var app = new Vue({
el: 'div',
data: {
size: {
S: false,
M: false,
L: '',
XL: '' //// 我们希望XL不是一个boolean值
}
},
computed: {
big: function () {
return 'is big'
}
}
})
当选框框值不想设置为boolean的时候,我们可以通过绑定true-value和false-value来定义
V-bind:true-value 选中时候的值
V-bind:false-value 没有选中时候的值
如果值是变量会去vue实例化对象中寻找数据(包含动态数据(优先)对象或者静态数据对象)
(2)单选
定义单选时候,我们要添加统一的同一个变量名称,这个变量会保存单选的选中元素。
单选要设置value值,这里的值会保留v-model的变量属性中
<label>男<input type="radio" v-model="sex" value="man" ></label>
<label>女<input type="radio" v-model="sex" value="woman"></label>
<p>{{sex}}</p>
var app = new Vue({
el: 'div',
data: {
sex: '' //未选中任何。为空
//man 默认选中man
}
})
(3)下拉框
在vue中定义下拉框,在select上多了一个v-model属性
如果想实现多选,select添加multiple属性
可以为option添加value属性,此时选中该选项的时候,获取的值就是value,如果不设置value默认使用的是option中的内容值
设置默认选中时,我们可以通过在vue实例化对象中绑定数据中定义,
如果是单选直接写上单选的值 email: ‘126’
如果是多选,我们可以将这些值写在一个数组中 email: [126,'sina']
vue中下拉框中每个选项是重复的,可以通过v-for来动态的渲染元素
Eg:
<p>{{email}}</p>
<select v-model="email" >
<option value="126">@126.com</option>
<option value="163">@163.com</option>
</select>
var app = new Vue({
el: 'div',
data: {
// 表示下拉框中选中的元素的值
email: ‘’
}
})
Eg;
<select v-model="email">
<option v-for="item in emails" value="item">
<template v-if="item == 'yeah'">@{{item}}.net</template>
<template v-if="item != 'yeah'">@{{item}}.com</template>
</option>
</select>
emails: [126, 163, 'sina', 'sohu', 'yeah', 139]
Eg:
<select v-model="email">
<option v-for="item in emails" selected="{{item.checked}}">
<template v-if="item == 'yeah'">@{{item.value}}.net</template>
<template v-if="item != 'yeah'">@{{item.value}}.com</template>
</option>
</select>
emails: [
{
value: 163,
checked: false
},
{
// 默认'sina'是被选中
value: 'sina',
checked: true
},
{
value: 'sohu',
checked: false
}
]
3:表单元素的特性
debounce 当输入完毕等待参数值时候,再进行数据的绑定。单位是毫秒
Lazy 做了失去焦点操作,当表单元素失去焦点时候,才会做数据的绑定
1<input type="text" debounce="1000" v-model="msg">
2<input type="text" lazy v-model="msg">
vue的表单的简单介绍 input radio checkbox等表单特性的更多相关文章
- Vue中的双向数据绑定简单介绍
1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- jquery 获取input radio/checkbox 的值 【注意写法】
今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...
- Jquery操作radio,checkbox,select表单操作实现代码
一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...
- css 更改input radio checkbox的样式
html <label> <input type="checkbox" class="colored-blue"> <span c ...
- vue之node.js的简单介绍
一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...
- vue学习【第三篇】:vue之node.js的简单介绍
什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时 ...
- vue之 node.js 的简单介绍
一.什么是 node.js? 它是可以运行在JavaScript的服务平台 二.安装 1.node.js的特性 - 非阻塞IO模型 - 时间驱动 2.运用场景 - 高并发低业务 - 实时场景 - 聊天 ...
- 设置input(radio,checkbox)和lable对齐的问题
在做页面的时候几次遇到label和前面的小图标无法对齐的情况,后来发现解决方法不过是 label { display:inline-block; vertical-align:top; line-he ...
随机推荐
- # Including Artificial Intelligence in a Routing ProtocolUsing Software Defined Networks
Abstract: 问题:AI在路由协议上的应用仅适用于真实设备,尤其是无线传感器节点 The inclusion of artificial intelligence (AI) can improv ...
- 后端model传入前端JSP页面中的值判断后再取值
所遇到的问题后端model传入前端JSP页面中的值通过foreach循环内要满足条件才能取值给Div中,我们知道jsp页面中可以直接用EL表达式取值,格式就是${"model中传来的数据&q ...
- VMware Fault Tolerance 概述及功能
VMware Fault Tolerance - 为您的应用程序提供全天候可用性 通过为虚拟机启用 VMware Fault Tolerance,最大限度地延长数据中心的正常运行时间,减少停机管理成本 ...
- java设计模式--解决单例设计模式中懒汉式线程安全问题
首先写个单例,懒汉模式: public class SingleDemo { private static SingleDemo s = null; private SingleDemo(){} pu ...
- SyntaxError: Unexpected token ' in JSON at position 1
刚才遇到一个问题: 在公司两个不同的环境竟然会出现错误 对比一下两个环境的数据,发现一个传来的是双引号的JSON字符串,一个是单引号.而当我用JSON.parse()时,就会报错!! 原因是JSON. ...
- jquery 的ajax
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
- 求LCA最近公共祖先的离线Tarjan算法_C++
这个Tarjan算法是求LCA的算法,不是那个强连通图的 它是 离线 算法,时间复杂度是 O(m+n),m 是询问数,n 是节点数 它的优点是比在线算法好写很多 不过有些题目是强制在线的,此类离线算法 ...
- ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴
在用户目录编辑.vimrc文件不存在则创建,vi的三种模式:命令模式,插入模式,可视模式,鼠标可以启动于各种模式中,所以配置文件中的set mouse=a启动了所有模式,这样就屏蔽了鼠标右健功能,se ...
- MFC下CSocket编程详解(转)
原文转自 http://blog.csdn.net/yejiansnake/article/details/2175778 MFC下CSocket编程详解: 1. 常用的函数和注意事项(详细的函数接口 ...
- 转 DNS原理及其解析过程【精彩剖析】
DNS原理及其解析过程[精彩剖析] http://369369.blog.51cto.com/319630/812889/ DNS原理及其解析过程 精彩剖析 网络通讯大部分是基于T ...