-
- checkbox 使用数组接受
- 修饰符
- .lazy 懒加载,失去焦点时,取数据
- .trim 去除前后空格
- .number 转数字
<body>
<div id="app">
<form @submit.prevent="submitForm">
账号:<input name="username" type="text" v-model.trim="username"><br>
密码:<input name="passwordd" type="password" v-model="password"><br>
年龄:<input name="age" type="number" v-model.number="age"> <br>
性别:
<input type="radio" name="gender" value="man" v-model="gender">男
<input type="radio" name="gender" value="woman" v-model="gender">女 <br>
爱好:
<input type="checkbox" name="hobby" value="game" v-model="hobby">游戏
<input type="checkbox" name="hobby" value="sport" v-model="hobby">运动
<input type="checkbox" name="hobby" value="music" v-model="hobby">音乐
<br>
选择地区:
<select name="area" v-model="area">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="anhui">安徽</option>
</select>
<br>
<textarea name="describe" placeholder="自我描述" v-model.lazy="describe">
</textarea>
<br>
<input type="checkbox" name="agree" v-model="agree">同意
<input type="submit" value="提交">
</form>
</div>
<script>
new Vue({
el: "#app",
data:{
username: '',
password: '',
gender: '',
age: '',
hobby: [],
area: '',
describe:'',
agree:''
},
methods: {
submitForm(){
console.log(JSON.stringify(this._data));
}
},
})
</script>
</body>