Vue 表单输入绑定

项目前导 学习笔记

一、表单输入绑定

        v-model 指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值。

1.1、绑定的属性和事件

        v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件。

                1. text 和 textarea 元素使用 value 属性和 input 事件。

                2. checkbox 和 radio 使用 checked 属性和 change 事件。

                3. select 字段将 value 作为 prop 并将 change 作为事件。

1.2、表单元素绑定

        v-model 是 v-model:value 的缩写，改变 input 标签中的值可以改变下面 data 的属性。

1. input 绑定

	<input v-model="message" placeholder="请输入...">
	<input v-model:value="message" placeholder="请输入...">
	<p>输入的内容是：{{ message }}</p>
	
	
	new Vue({
	  el: '#app',
	  data: {
	    message: ""
	  }
	})

2. textarea 文本域 绑定

	<textarea v-model="message" cols="30" rows="5" placeholder="请输入多行内容..."></textarea><br><br>
	<span>输入的内容是：</span>
	<p style="white-space: pre-line;">{{ message }}</p>

3. checkbox 复选 绑定

	<div id='app'>
		<input type="checkbox"  value="Jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox"  value="John" v-model="checkedNames">
		<label for="john">John</label>
		<input type="checkbox"  value="Mike" v-model="checkedNames">
		<label for="mike">Mike</label>
		<br><br>
		<span>Checked names: {{ checkedNames }}</span><br>
	</div>


	new Vue({
		el: '#app',
		data: {
		  //  因为要存放选取的数据, 所以应该用数组
		  //  存储的是 value 属性的值
		  checkedNames: []
		}
	})

4. radio 单选 绑定

	<div id="app">
		<input type="radio" value="男" v-model="gender">
	    <label>男</label>
	    <br>
	    <input type="radio" value="女" v-model="gender">
	    <label>女</label>
	    <br>
	    <span>Picked: {{ gender }}</span>
	</div>
	
	
	new Vue({
		el: '#app',
		data: {
		  gender: ''
		}
	})

5. select 下拉 绑定

	<div id="app">
	    <select v-model="selected">
	    	<!--  disabled 表示不可选  -->
	        <option disabled value="">请选择</option>
	        <!--  如果有 value 值, 则选择的就是 value 值  -->
	        <option value="1">A</option>
	        <option>B</option>
	        <option>C</option>
	    </select><br><br>
	    <span>Selected: {{ selected }}</span><br>
	</div>
	
	
	new Vue({
		el:'#app',
		data: {
		  selected: ''
		}
	})

1.3、修饰符

1. .lazy
   
           在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步（除了上述输入法组合文字时），你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步（输入完成，鼠标点击输入框外任意位置）：

	<!-- 在 "change" 时而非 "input" 时更新, 光标移除 input 输入框的时候 -->
	<input type="text" v-model:value.lazy="message">
	<!-- 简写 -->
	<input v-model.lazy="message" >
	
	
	new Vue({
		el: '#app',
		data: {
		  message: ''
		}
	})

2. .number
   
           如果想用户的输入值只能为数值类型，可以给 v-model 添加 number 修饰符。这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

	<input v-model.number="message" type="number">

3. .trim
   
           如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

	<input v-model.trim="message">