Vue2基础 11：v-model 收集表单数据

Fxcrisp

于 2024-06-02 23:12:05 发布

阅读量416

点赞数 9

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

本文链接：https://blog.csdn.net/fxcrisp/article/details/139399437

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-model 收集表单数据

案例
小结

案例

<body>
    <div id="root">
        <form @submit.prevent="demo">
        <!--
            1.不需要配置action，因为不跳转，而是作为一个结构来呈现，然后通过ajax把数据发给后端
            2.阻止默认行为，即跳转页面
        -->
        
        <!--普通文本输入 修饰符trim：去掉空格-->
            <!--第一种写法，写点击账号两个字也可以更新焦点行到输入框-->
            <label for="demo">账号：</label>
            <input type="text" id="demo" v-model.trim="userInfo.account"><br/><br/>
            
            <!--普通写法-->
            密码：<input type="password" v-model="userInfo.password"><br/><br/>
            
            <!--控制输入的文本且收集为数值型，一般type和v-model修饰符同时使用-->
            年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>
            年龄：<input type="number" v-model="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" v-model="userInfo.hobby" value="study">
                打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
            <!--若无value值，默认读取checked的布尔值，即是否被勾选-->
            
        <!--下拉框-->
            所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="wuhan">武汉</option>
                </select><br/><br/>
                
        <!--多行输入文本 添加修饰符lazy：失去焦点再收集-->
            其他信息：
                <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
        <!--勾选框--> 
            <input type="checkbox" v-model="userInfo.agree">阅读并接收<a href="fxcrisp.github.io">《用户协议》</a><br/><br/> <!--这里只需要读取checked的布尔值，即是否被勾选，不需要value-->
            <button>提交</button>
        </fomr>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:'',
                sex:'female',
                hooby:[], //多选框
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods:{
            demo(){
                //用ajax进行前后端数据交互，一般将收集到的数据整理成json格式然后传给后端
                console.log(JSON.stringify(this.userInfo))//转成json的格式
            }
        }
    })
</script>

小结

普通输入框：<input type=“text”/>，则v-model收集的是value值，用户输入的是value值
单选框：<input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值
多选框：<input type=“checkbox”/>
（1）若没有配置value属性，则收集的是checked（布尔值–是否勾选）
（2）配置了value属性，且v-model的初始值为非数组，那么收集的就是checked
（3）配置了value属性，且v-model的初始值为数组，那么收集的就是value组成的数组
v-model的修饰符：number、lazy(失去焦点再更新)、trim