Vue 基本的表单提交

**

Vue 基本的表单提交

**
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
div class="form">
		<form action>
			<ul>
				<li>
					<label for="name">姓名：</label>
					<input type="text" name="" id="" value="" v-model="uname" placeholder="请输入姓名" />
				</li>
				<li>
					<label for="sex">男：</label>
					<input type="radio" name="" id="" value="1" v-model="sex"/>
					<label for="sex">女：</label>
					<input type="radio" name="" id="" value="0" v-model="sex"/>
				</li>
				<li>
					<label for="sex">月薪：</label>
					<input type="number" name="" id="" value="" v-model.number="money"/>
				</li>
				<li>
					<!--<label for="">爱好</label>-->
					<span>
						书法：<input type="checkbox" value="shufa" v-model="like" />
					</span>
					<span>
						阅读：<input type="checkbox" value="yuedu" v-model="like" />
					</span>
					<span>
						体育：<input type="checkbox" value="tiyu" v-model="like" />
					</span>
					<span>
						研究：<input type="checkbox" value="yanjiu" v-model="like" />
					</span>
				</li>
				<li>
					<label for="">职业：</label>
					<!--multiple 这个是可以多选的，按住 shift 键进行多选-->
					<select name="" v-model="work" multiple="true">
						<option value="zsj">总经理</option>
						<option value="swsj">项目经理</option>
						<option value="shiwsj">技术总监</option>
						<option value="xz">组长</option>
						<option value="qz">普通员工</option>
					</select>
				</li>
				<li>
					<label for="">简介：</label>
					<textarea name="" rows="" cols="" v-model.trim="peopleInfo"></textarea>
				</li>
			</ul>
			
			<input type="submit" name="" id="" value="提交" @click.prevent="submitForm" />
			<!-- 注册提交事件 .prevent 阻止表单的默认提交行为 -->
		</form>
	</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'.form',
		data:{
			uname: "",
	        sex: "",
	        money: "",
	        like:['shufa'],//因爱好多个，所以需要存数组，否则点击一个，所有的都会被选中（有默认值则会被默认选中）
	        work:'',
	        peopleInfo: "",
		},
		methods:{
			submitForm(e) {
		    	console.log('姓名：'+this.uname);
		    	console.log('性别：'+this.sex);
		    	console.log('年薪：'+this.money);
		    	console.log('爱好：'+this.like);
		    	console.log('职业：'+this.work);
		    	console.log('简介：'+this.peopleInfo);
		    }
		}
	})
</script>