Vue中的表单绑定
1、v-model指令只能在input、select、textarea这三类标签上使用
注意:
(1)用在select标签时,推荐第一项设置为‘<option disabled>--请选择--</option>’
,增强用户体验。
(2)用在select标签时,如果给option设置value属性,select框对应的数据的值会变成选中的option的value值;如果option没有设置value值,那select对应的数据值会是option的innerText值。
<div id="app">
<textarea v-model="value"></textarea>
<input type="checkbox" v-model="value">
<input type="radio" value="radiovalue" v-model="value">
<select v-model="value">
<option disabled=>--请选择--</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
{{value}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
value:''
}
})
</script>
2、Vue表单绑定的修饰符:
【表单修饰符主要是针对表单输入的。所以说修饰符一般是针对可以输入内容的input和textarea标签使用的。】
(1)v-model.lazy:当失去焦点(包括按下回车键)的时候才会同步数据
(2)v-model.number:把输入框里的内容尽量转换为number类型然后存入绑定的变量里【input框里不管输入什么内容,都会默认为是string类型】
(3)v-model.trim:去掉输入框里的内容前后的空格,然后存入绑定的变量中
<div id="app">
<input type="text" v-model.lazy.number.trim="value">
{{value}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
value:''
},
watch:{
value:function(){
console.log(typeof this.value)
}
}
})
</script>