完成表单提交的学习

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>