[JavaScript知识库]vue——表单绑定

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>