表单

表单

Input(输入框)

<!-- input -->
			<h2>Input</h2>
			<p>input 元素：</p>
			<input v-model.lazy="message" placeholder="编辑我......">
			<p>消息是：{{ message }}</p>
			<p>textarea 元素：</p>
			<textarea v-model="message2" placeholder="多行文本输入......"></textarea>
			<p style="white-space: pre">{{ message2 }}</p>

Checkbox（复选框）

<!-- checkbox -->
			<h2>Checkbox</h2>
			<!-- single checkbox -->
			<p>单个复选框：</p>
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{ checked }}</label>
			<!-- multiply checkbox -->
			<p>多个复选框：</p>
			<input type="checkbox" id="huawei" value="HuaWei" v-model="checkedNames">
			<label for="huawei">HuaWei</label>
			<input type="checkbox" id="alibaba" value="Alibaba" v-model="checkedNames">
			<label for="alibaba">Alibaba</label>
			<input type="checkbox" id="tencent" value="Tencent" v-model="checkedNames">
			<label for="tencent">Tencent</label>
			<br>
			<span>选择的值为：{{ checkedNames }}</span>
			<br>

Radio（按钮）

<!-- radio -->
			<h2>Radio</h2>
			<input type="radio" id="huawei" value="HuaWei" v-model="picked">
			<label for="huawei">HuaWei</label>
			<br>
			<input type="radio" id="alibaba" value="Alibaba" v-model="picked">
			<label for="alibaba">Alibaba</label>
			<br>
			<input type="radio" id="tencent" value="Tencent" v-model="picked">
			<label for="tencent">Tencent</label>
			<br>
			<span>选中的值为：{{ picked }} </span>

Select List（下拉列表）

<!-- selected list -->
			<h2>Selected List</h2>
			<select v-model="selected" name="fruit">
				<option value="">选择一个网站</option>
				<option value="www.google.com">Google</option>
				<option value="www.alibaba.com">Alibaba</option>
				<option value="www.huawei.com">HuaWei</option>
				<option value="www.tencent.com">Tencent</option>
			</select>
			<div>{{ selected }}</div>
			<br>

Modifier（修饰符）

<!-- modifier -->
			<h2>.lazy</h2>
			<input v-model.lazy="msg">
			<p>{{ msg }}</p>
			<h2>.number</h2>
			<input v-model.number="age" type="number">
			<p>{{ age }}</p>
			<h2>.trim</h2>
			<input v-model.trim="msg2">
			<p>{{ msg2 }}</p>

主要代码：

<!-- form : v-model -->
	<div id="example-6">
	    <!-- input -->
			<h2>Input</h2>
			<p>input 元素：</p>
			<input v-model.lazy="message" placeholder="编辑我......">
			<p>消息是：{{ message }}</p>
			<p>textarea 元素：</p>
			<textarea v-model="message2" placeholder="多行文本输入......"></textarea>
			<p style="white-space: pre">{{ message2 }}</p>
		
		<!-- checkbox -->
			<h2>Checkbox</h2>
			<!-- single checkbox -->
			<p>单个复选框：</p>
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{ checked }}</label>
			<!-- multiply checkbox -->
			<p>多个复选框：</p>
			<input type="checkbox" id="huawei" value="HuaWei" v-model="checkedNames">
			<label for="huawei">HuaWei</label>
			<input type="checkbox" id="alibaba" value="Alibaba" v-model="checkedNames">
			<label for="alibaba">Alibaba</label>
			<input type="checkbox" id="tencent" value="Tencent" v-model="checkedNames">
			<label for="tencent">Tencent</label>
			<br>
			<span>选择的值为：{{ checkedNames }}</span>
			<br>
		<!-- radio -->
			<h2>Radio</h2>
			<input type="radio" id="huawei" value="HuaWei" v-model="picked">
			<label for="huawei">HuaWei</label>
			<br>
			<input type="radio" id="alibaba" value="Alibaba" v-model="picked">
			<label for="alibaba">Alibaba</label>
			<br>
			<input type="radio" id="tencent" value="Tencent" v-model="picked">
			<label for="tencent">Tencent</label>
			<br>
			<span>选中的值为：{{ picked }} </span>
		<!-- selected list -->
			<h2>Selected List</h2>
			<select v-model="selected" name="fruit">
				<option value="">选择一个网站</option>
				<option value="www.google.com">Google</option>
				<option value="www.alibaba.com">Alibaba</option>
				<option value="www.huawei.com">HuaWei</option>
				<option value="www.tencent.com">Tencent</option>
			</select>
			<div>{{ selected }}</div>
			<br>
		<!-- modifier -->
			<h2>.lazy</h2>
			<input v-model.lazy="msg">
			<p>{{ msg }}</p>
			<h2>.number</h2>
			<input v-model.number="age" type="number">
			<p>{{ age }}</p>
			<h2>.trim</h2>
			<input v-model.trim="msg2">
			<p>{{ msg2 }}</p>
		
	</div>
<!-- define vue object -->
    <script type="text/javascript">
        new Vue({
            el:'#example-6',
            data: {
                message: 'Google',
                message2: 'Google\r\nhttp://www.google.com',
                checked: false,
                checkedNames: [],
                picked: 'HuaWei',
                selected: '',
                msg: '',
                age: '',
                msg2: ''
            }
        });
    </script>