vue中input多选_vue的表单的简单介绍inputradiocheckbox等
表单特性
在vue中我们可以通过v-model来为表单元素实现双向绑定
1:v-model指令
数据的双向绑定
双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V)，还是当视图的内容改变(V)去影响模型中的数据(M)
通常来说双绑定应⽤在表单中⽐较多
指令： vue对html元素拓展是⼀些属性名称(⾃定义属性名称)
Vue指令有个特点，都是以v-开头的
V-model，它提供了⼀个js环境，在他的属性之中我们可以使⽤js(vue实例化对象)中的变量，将表单元素的值与vue实例化对象中是数据属性同步，实现视图到模型中的数据的⼀个绑定，因此在表单元素上添加
了v-model就实现⼀种双向绑定
{{msg }}
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:
S
M
L
//'small'是字符串  big变量
{{size | json}}
//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的变量属性中
男
⼥
{{sex}}
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:
{{email}}
@126
@163
var app = new Vue({
el: 'div',
data: {
// 表⽰下拉框中选中的元素的值
email: ‘’
}
})
Eg;
@{{item}}
vuejson转对象@{{item}}
emails: [126, 163, 'sina', 'sohu', 'yeah', 139]
Eg:
@{{item.value}}
@{{item.value}}
emails: [
{
value: 163,
checked: false
},
{
// 默认'sina'是被选中
value: 'sina',
checked: true
},
{
value: 'sohu',
checked: false
}
]
3：表单元素的特性
debounce 当输⼊完毕等待参数值时候，再进⾏数据的绑定。单位是毫秒Lazy 做了失去焦点操作，当表单元素失去焦点时候，才会做数据的绑定1
2

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。