在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等表单特性的更多相关文章

  1. Vue中的双向数据绑定简单介绍

    1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...

  2. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  3. jquery 获取input radio/checkbox 的值 【注意写法】

    今天,在用jquery获取页面上radio值的时候,radio给出了默认值,但是无论如何修改值,radio始终是默认值,去掉默认值的时候,页面上又报出了undefined的错误.经过几番搜索,发现不同 ...

  4. Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); / ...

  5. css 更改input radio checkbox的样式

    html <label> <input type="checkbox" class="colored-blue"> <span c ...

  6. vue之node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  7. vue学习【第三篇】:vue之node.js的简单介绍

    什么是node.js 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 安装node.js node.js的特性 - 非阻塞IO模型 - 时 ...

  8. vue之 node.js 的简单介绍

    一.什么是 node.js? 它是可以运行在JavaScript的服务平台 二.安装 1.node.js的特性 - 非阻塞IO模型 - 时间驱动 2.运用场景 - 高并发低业务 - 实时场景 - 聊天 ...

  9. 设置input(radio,checkbox)和lable对齐的问题

    在做页面的时候几次遇到label和前面的小图标无法对齐的情况,后来发现解决方法不过是 label { display:inline-block; vertical-align:top; line-he ...

随机推荐

  1. IO多路复用的理解

    最近看了<后台开发核心技术与应用实践>有关select.poll和epoll部分以及相关的一些博客,学习了这三个函数的使用方法和区别,写一个易理解的总结. IO多路复用 之前程序中使用的I ...

  2. [bzoj2038] [2009国家集训队]小Z的袜子

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...

  3. [SP10707]COT2 - Count on a tree II

    题目大意:有一棵$n$个节点的树,第$i$个点有一个颜色$C_i$,$m$组询问,每次问$x->y$的路径上有多少种颜色 题解:树上莫队,把树按欧拉序展开成一条链,令第$i$个节点第一次出现在序 ...

  4. 算法复习———dijkstra求次短路(poj3255)

    题目: Description Bessie has moved to a small farm and sometimes enjoys returning to visit one of her ...

  5. UVA 10652 Board Wrapping(二维凸包)

    传送门 刘汝佳<算法竞赛入门经典>P272例题6包装木板 题意:有n块矩形木板,你的任务是用一个面积尽量小的凸多边形把它们抱起来,并计算出木板占整个包装面积的百分比. 输入:t组数据,每组 ...

  6. 解决_CRT_SECURE_NO_WARNINGS 警告

    问题:我们在程序中使用fopen等CRT函数,就会出现一些警告信息,很烦人,如下: 1>e:/project/htt/ishow/functions.cpp(156) : warning C49 ...

  7. 颜色混合opengl--glBlendFunc函数

    http://www.cnblogs.com/ylwn817/archive/2012/09/07/2675285.html 颜色混合opengl--glBlendFunc函数 原文:http://b ...

  8. 通过OpenGL ES在iOS平台实践增强现实

    http://www.cnblogs.com/elvisyzhao/p/3398250.html 本文采用OpenGL ES 1固定渲染管线实现,目标为在设备拍摄到的现实世界中,绘制世界坐标轴,并根据 ...

  9. 转 Scrapy笔记(5)- Item详解

    Item是保存结构数据的地方,Scrapy可以将解析结果以字典形式返回,但是Python中字典缺少结构,在大型爬虫系统中很不方便. Item提供了类字典的API,并且可以很方便的声明字段,很多Scra ...

  10. vue.js基本使用

    #原创,转载请留言联系 什么是vue.js Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目 ...