Vue 收集表单数据

最新推荐文章于 2024-05-17 14:32:46 发布

挚夕

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量30

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131542547

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

- 使用v-model，双向数据绑定
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>