Vue表单数据收集

Vue表单数据收集

    <div id="app">
        <form action="/index">
            <span>用户名:</span>
            <input type="text" v-model="user.username">

            <span>密码:</span>
            <input type="password" v-model="user.pwd">
            <br />
            <span>性别:</span>
            <input type="radio" id="female" v-model="user.sex" value="女">
            <label for="female">女</label>
            <input type="radio" id="male" v-model="user.sex" value="男">
            <label for="male">男</label>
            <br />
            <span>爱好:</span>
            <input type="checkbox" id="basket" value="basket" v-model="user.likes">
            <label for="basket">男球</label>
            <input type="checkbox" id="foot" value="foot" v-model="user.likes">
            <label for="foot">足球</label>
            <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
            <label for="pingpang">乒乓</label>
            <br />
            <span>城市:</span>
            <select v-model="user.cityID">
                <option value="">未选择</option>
                <option :value="item.id" v-for="(item,index) in citys" :key="item.id">{{item.name}}</option>
            </select>
            <br />
            <span>介绍:</span>
            <textarea rows="10" v-model="user.info"></textarea>
            <br />
            <input type="submit" value="注册" @click.prevent="submit">
        </form>
    </div>
    <script>
        Vue.config.devtools = true;
        var app = new Vue({
            el: "#app",
            data: {
                user: {
                    username: "admin",
                    pwd: '123',
                    sex: "女",
                    likes: ['basket'],
                    cityID: "",
                    info: ""
                },
                citys: [
                    { id: 1, name: "SZ" },
                    { id: 2, name: "BJ" },
                    { id: 3, name: "SC" }
                ]
            },
            methods: {
                submit() {
                    console.log("发送ajax请求", JSON.stringify(this.user));
                }
            }
        })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。