9、表单

文本

<div id="app">
			<!--文本框-->
			<div>
				<input v-model="message" placeholder="edit me"/>
				<p>message={{message}}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				message:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

多行文本

<div id="app">
			<!--多行文本-->
			<div>
				<textarea v-model="textarea"></textarea>
				<p>textarea:{{textarea}}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				textarea:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

复选框

<div id="app">
			<!--复选框-->
			<div>
				<input type="checkbox" v-model="checkbox" value="a"/>
				<input type="checkbox" v-model="checkbox" value="b"/>
				<input type="checkbox" v-model="checkbox" value="c"/>
				<p>checkbox:{{checkbox}}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				checkbox:[]
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

单选按钮

<div id="app">
                <!--单选按钮-->
			<div>
				<input type="radio" v-model="radio" value="a"/>
				<input type="radio" v-model="radio" value="b"/>
				<div>radio:{{radio}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				radio:''
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

下拉框

<div id="app">
			<!--选择框select-->
			<div>
				<select v-model="select">
					<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
				</select>
				<div>select:{{select}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				options:[
					{value:"v1", text:"t1"},
					{value:"v2", text:"t2"},
					{value:"v3", text:"t3"}
				],
				select:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

修饰符lazy

只有在文本框失去焦点时，才会改变

<div id="app">
			<!--修饰符lazy，只有在文本框失去焦点时，才会改变msg的值-->
			<div>
				<input v-model.lazy="msg"/>
				<div>msg:{{msg}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				mess
				msg:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>