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">