完成表单提交的学习

2 years ago · e9f774d5a4
parent e9bf42cc5f
commit e9f774d5a4
1 changed files with 61 additions and 0 deletions
--- a/13_收集表单数据/收集表单数据.html
+++ b/13_收集表单数据/收集表单数据.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>收集表单数据</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <form @submit.prevent="demo">
+        <label for="account">账号：</label>
+        <input type="text" id="account" v-model.trim="userInfo.account"><br/><br/>
+        密码：<input type="password" v-model="userInfo.password"><br/><br/>
+        年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>
+        性别：
+        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
+        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br/><br/>
+        爱好：
+        抽烟<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="smoke">
+        喝酒<input type="checkbox" name="hobby" v-model="userInfo.hobby" value="drink">
+        烫头<input type="checkbox" name="hooby" v-model="userInfo.hobby" value="hair"><br/><br/>
+        所属校区：
+        <select v-model="userInfo.city">
+            <option value="">请选择校区</option>
+            <option value="beijing">北京</option>
+            <option value="shanghai">上海</option>
+            <option value="shenzhen">深圳</option>
+            <option value="wuhan">武汉</option>
+        </select><br/><br/>
+        其他信息：
+        <textarea name="otherInfo" id="" cols="30" rows="5" v-model.lazy="userInfo.other"></textarea><br/><br/>
+        <input type="checkbox" name="agree" v-model="userInfo.agree">阅读并接受<a
+            href="http://www.baidu.com">《用户协议》</a>
+        <button type="submit">提交</button>
+    </form>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            userInfo: {
+                account: "",
+                password: "",
+                age: 20,
+                sex: "female",
+                hobby: [],
+                city: "",
+                other: "",
+                agree: false,
+            }
+        },
+        methods: {
+            demo() {
+                console.log(JSON.stringify(this.userInfo))
+            }
+        }
+    })
+</script>
+</html>