<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root" v-on:click.prevent="submit">
<!-- 一般不使用action传到其他页面 而是使用ajax -->
<form>
<!-- label 专门为input提高用户体验的
当点击ladel里的内容光标跳到输入框里面
for for="name" 跳转的输入框 id="name" 取相同的名字 这个是显示 绑定
trim 清楚空格
-->
<label for="name">账号：</label>
<input type="text" id="name" v-model.trim="infor.accont" />
<br />
<br />
<!-- 隐式绑定
<label >账号：
<input type="text"></label>-->
<label>
密码：
<input type="password" v-model="infor.pw" />
</label>
<br /> 年龄:
<!-- 年龄必须事整形 type="number" v-model.number="infor.age" number同时使用-->
<input type="number" v-model.number="infor.age">
<input type="radio" name="sex" v-model="infor.sex" value="male" /> 女：
<input type="radio" name="sex" v-model="infor.sex" value="female" />
<br />
<br /> 爱好： 学习
<input type="checkbox" value="study" v-model="infor.hobby" /> 上网
<input type="checkbox" value="run" v-model="infor.hobby" /> 骑行
<input type="checkbox" value="computer" v-model="infor.hobby" />
<br />
<br /> 所属校区：
<select name="" v-model="infor.city">
<option value="guiyang">贵阳</option>
<option value="beijing">北京</option>
<option value="chengdu">成都</option>
<option value="changchun">长春</option>
<option value="白城">白城</option>
</select>
<br />
<br />
<p>其他信息</p>
<!-- 文本输入框只要输入信息就会实时改变 加一个lazy -->
<textarea v-model.lazy="infor.other"></textarea>
<br />
<br />
<input type="checkbox" v-model="infor.agree" /> 阅读并接受
<button>提交</button>
<br />
</form>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
infor: {
accont: '', //账号
pw: '', //password
sex: '', //性别 单选框
age: 18,
// 多组的复选框收集必须用数组 才可以收集到数据 复选框必须要增加value属性才可以收集到数据
hobby: [], //爱好
city: "guiyang", //城市
other: '', //其他信息
agree: '' //是否同意
}
},
methods: {
submit() {
// console.log(this._data)
console.log(JSON.stringify(this.infor))
}
},
});
</script>
</body>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
