vue表单输入绑定（v-model）

https://cn.vuejs.org/v2/guide/forms.html

一、基础用法

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

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<div id="app">
	<!-- 数据双向绑定 -->
	<!-- 修饰符： .lazy提升性能 .trim消除空格-->
	<input type="text" name="username" v-model.lazy.trim="username" value="" />
	<p>{{username}}</p>
	<textarea rows="" cols="" v-model="username"></textarea>
	<!-- 复选框 -->
	<span v-for="item in fruits">
		{{item}}
		<input type="checkbox" name="fruit" v-model="checkFruits" :value="item" />
	</span>
	<h1>{{checkFruits}}</h1>
	
	<h1>选项框：选择居住的城市</h1>
	<select v-model="cCity">
		<option v-for="item in cities" :value="item">{{item}}</option>
	</select>
	<h3>{{cCity}}</h3>
	
	<!-- 数组选择框 -->
	<select v-model="dCity" multiple="multiple">
		<option v-for="item in cities" :value="item">{{item}}</option>
	</select>
	<h3>{{dCity}}</h3>
</div>
<script type="text/javascript">
	let app = new Vue({
		el:"#app",
		data:{
			username:"zjj",
			fruits:['香蕉','龙眼','火龙果','葡萄'],
			// 单选框的要用“”
			checkFruits:[],
			cities:['北京','上海','深圳','广州'],
			cCity:"",
			dCity:[]
		}
	})
</script>

二、值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

三、修饰符

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">

四、组件上的v-model

• 方案一：

<div id="app">
	<input-com :username='username' @child-input='changeEvent'></input-com>
	<input-com :username='username' @child-input='username=$event'></input-com>
	<h3>{{username}}</h3>
</div>
<script type="text/javascript">
	Vue.component('input-com',{
		props:['username'],
		// 监听输入事件，触发自定义事件'child-input'，传入当前的value——$event.target.value
		template:`<input type="text" @input="$emit('child-input',$event.target.value)" :value="username" />`,
	})
	let app = new Vue({
		el:"#app",
		data:{
			username:""
		},
		methods:{
			changeEvent:function(data){
				this.username = data
			}
		}
	})
</script>

• 方案二：直接使用v-model

<div id="app">
	<input-com v-model="username"></input-com>
	<h3>{{username}}</h3>
</div>
<script type="text/javascript">
	Vue.component('input-com',{
		props:['username'],
		// 监听输入事件，触发事件'input'，传入当前的value——$event.target.value
		// 注意：此处触发的input不是自定义事件
		template:`<input type="text" @input="$emit('input',$event.target.value)" :value="username" />`,
	})
	
	let app = new Vue({
		el:"#app",
		data:{
			username:""
		},
	})
</script>