Vue的收集表单数据

最新推荐文章于 2024-09-11 16:44:46 发布

小乔要努力变强_

最新推荐文章于 2024-09-11 16:44:46 发布

阅读量79

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xhnlbq/article/details/134402445

版权

Vue的收集表单数据

文章目录

Vue的收集表单数据
前言
一、使用步骤
- 1.精华全在注释里
总结

前言

Vue用v-model进行表单数据收集

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.精华全在注释里

代码如下（示例）：

<body>
    <div id="root">
        <form @submit.prevent="demo"><!-- 提交表单阻止页面刷新默认行为 -->
            账号：<input type="number" v-model.number="xinxi.admin"/><br/><br/><!-- 注意这里的nubmer要合着用，不然容易字符串乱入 -->
            账号：<input type="number" v-model.trim="xinxi.admin"/><br/><br/><!-- trim,把字符串前后的空格都注释掉 -->
            密码：<input type="password" v-model="xinxi.password" /><br/><br/>
            性别：
            男<input type="radio" name="sex" value="man" v-model="xinxi.sex"/>
            女<input type="radio" name="sex" value="waman" v-model="xinxi.sex"/><br/><br/>
            爱好：
            抽烟<input type="checkbox" v-model="xinxi.hobby" value="smoking"/>
            喝酒<input type="checkbox" v-model="xinxi.hobby" value="drink"/>
            烫头<input type="checkbox" v-model="xinxi.hobby" value="perm"/><br/><br/>
            所属校区：
            <select name="school" v-model="xinxi.city">
                <option value="">请选择校区</option>
                <option value="xinxi.bj">北京</option>
                <option value="xinxi.sh">上海</option>
                <option value="xinxi.sz">深圳</option>
            </select><br/><br/>
            其他信息：<textarea v-model.lazy="xinxi.more"></textarea><br/><br/><!-- "lazy"失去焦点再更新Vue的数据 -->
            <input type="checkbox" v-model="xinxi.agree" value="true"/>阅读并接受<a href="www.baidu.com">《用户协议》</a><br/><br/>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script>
    const vm=new Vue({
        el:'#root',
        data:{
            xinxi:{
                admin:'',//这里定义什么类型，Vue默认接受就是什么类型
                password:'',
                sex:'',
                hobby:[],
                city:'',
                more:'',
                agree:''
            }
            
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.xinxi))//一般转json数据输出是用这种方式
            }
        }
    })
</script>