创建一个表单，利用vue完成所有逻辑
- 准备一个容器
<div id="root">
<!--- @submit 指定提交行为， prevent阻止默认的刷新页面行为--->
<form @submit.prevent="submitForm">
username: <input type="text" v-model="userInfo.username"><br/><br/>
password: <input type="password" v-model="userInfo.password"><br/><br/>
gender:
<input type="radio" name="gender" value="female" v-model="userInfo.gender">F
<input type="radio" name="gender" value="male" v-model="userInfo.gender">M
<br/><br/>
hobbies:
sing<input type="checkbox" value="sing" v-model="userInfo.hobby">
dance<input type="checkbox" value="dance" v-model="userInfo.hobby">
rap<input type="checkbox" value="rap" v-model="userInfo.hobby">
<br/><br/>
campus:
<select v-model="userInfo.campus">
<option value="">Please select your campus</option>
<option value="Redstone">Redstone</option>
<option value="Central">Central</option>
<option value="Trinity">Trinity</option>
</select>
<br/><br/>
details:
<textarea v-model="userInfo.details"></textarea>
<br/><br/>
<input type="checkbox" v-model="userInfo.isAgreed">Agreement on our <a href="ccc.com">privacy policy</a>
<br/><br/>
<button type="submit">submit</button>
</form>
</div>
- 创建一个vue实例
new Vue({
el: '#root',
data: {
// 创建一个userInfo对象
userInfo: {
username: '',
password: '',
gender: 'female', // 给一个默认值，初始渲染时就会自动勾选一个值
hobby: [], // 对于多选项的checkbox，使用数组
campus: '',
details: '',
isAgreed: true // 对于单选项的checkbox，随便
}
},
methods: {
submitForm(){
// 提交后打印所有信息
console.log(JSON.stringify(this.userInfo))
}
}
})
- 一些有用的v-model修饰符
- number: 输入数字类型的值, 强制转化为数字，比如年龄
age: <input type="number" v-model.number="userInfo.age">
- lazy: 输入长字符串时，阻止vue实时收集数据，而是当输入框失去聚焦时全部收集
<textarea v-model.lazy="userInfo.details"></textarea>
- trim: 输入字符串时，去掉首位的空格
username: <input type="text" v-model.trim="userInfo.username">