Vue收集表单数据

2022-01-29 10:31:34 阅读：119 来源： 互联网

直接看例子吧。

<body>
    <div id="root">
        <form @submit.prevent="submit">
            账号：<input type="text" v-model.trim="userInfo.account"><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            性别：
            男<input type="radio" value="male" v-model="userInfo.gender">
            女<input type="radio" value="female" v-model="userInfo.gender"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            爱好：
            吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
            睡觉<input type="checkbox" value="sleep" v-model="userInfo.hobby">
            打豆豆<input type="checkbox" value="beat" v-model="userInfo.hobby"><br><br>
            所在城市：
            <select v-model="userInfo.city" multiple>
                <option value="">请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select><br><br>
            其他信息：<textarea v-model.lazy="userInfo.otherInfo"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受  <a href="http://www.baidu.com">《用户协议》</a><br><br>
            <button>提交</button>
        </form>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            userInfo:{
                account:"",
                password:"",
                age:"",
                gender:"",
                hobby:[],
                city:"",
                otherInfo:"",
                agree:""
            }
        },
        methods: {
            submit(){
                console.log(JSON.stringify(this.userInfo));
            }
        },
    })
    </script>
</body>

在这里插入图片描述

v-model的使用

对于单行文本框，用户输入的值就是value值，v-model要收集的就是这个value值。
对于多行文本框，用户输入的值就是value值，v-model要收集的就是这个value值。
对于单选框，要配置value值，v-model收集的就是这个value值。
对于复选框，要配置value值。
- 如果v-model的初始化值是一个字符串，则v-model收集到的是checked，一个布尔值（true或false，勾选或未勾选）。
- 如果v-model的初始化值是一个数组，则v-model收集到的是value组成的数组。
对于选择框，要配置option的value值。
- 如果是单选，则v-model收集的是选中的option的value值。
- 如果是多选，则v-model收集的是选中的option的value组成的数组。

v-model修饰符

.number，将输入的字符串转换为数字。
.lazy，失去焦点时再收集数据。
.trim，过滤字符串首尾空格。

相关文章有：【vue】v-model

标签：Vue,option,收集,value,表单,字符串,model
来源： https://blog.csdn.net/qzw752890913/article/details/122739581

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue收集表单数据

v-model的使用

v-model修饰符