vue中使用v-model收集不同类型表单数据

离奇6厘米

已于 2022-08-13 22:48:09 修改

阅读量536

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-13 22:45:40 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126325238

版权

目标

一小时掌握vue如何收集不同类型表单数据

表单类型

表单收集的信息针对有text、textarea，checkbox，radio，select

Vue如何收集不同类型表单数据

1、text/textarea类型表单

<p>姓名：<input type="text" v-model="name"></p>
<p>其他信息：
    //lazy为是修饰符，当表单域失去焦点再收集数据，提高性能
    <textarea placeholder="请输入其他相关信息" v-model.lazy="otherMsg"></textarea>
</p>

<script>
    data：{
        name: '',
        otherMsg: '',
    }
</script>

小结：<input type="text">和<textarea>中v-model收集的是用户输入的value值。

2、值为number类型的表单

 //年龄为number类型
<p>年龄：<input type="number" v-model.number="age"></p>

<script>
    data：{
        age:'',
    }
</script>

小结：如果收集的数据类型必须为number，那么type=“number”需要搭配v-model.number一起使用才能奏效

3、radio类型表单

<p>性别：
    //二选一
    <input type="radio" v-model="sex" value="male">男<input type="radio" v-model="sex" value="female">女
</p>

<script>
    data：{
       sex：'', 
    }
</script>

小结：<input type="radio">中需要先给单选框配置value值，这样v-model才能收集到用户是选择了哪个单选框

4、checkbox类型表单

<p>爱好：
    //多项选择
    <input type="checkbox" v-model="hobby" value="play">玩耍
    <input type="checkbox" v-model="hobby" value="eat">吃粮
    <input type="checkbox" v-model="hobby" value="drink">喝水
</p>
//单选框
<input type="checkbox" v-model="agree"> 阅读并接受以上协议

<script>
    data:{
        hobby:[],
    }
</script>

小结：（1） <input type="checkbox">中没有配置value值或者v-model的值为非数组类型，那么收集的是checked（布尔值，勾选或不勾选）

（2）<input type="checkbox">中配置value值并且v-model的值为数组类型，那么收集的是value组成的数组

（3）当<input type="checkbox">为单选框时，可以不用配置value值，v-model收集的为布尔值

5、select类型表单

<select v-model="city">
    <option value="beijing" >北京</option>
    <option value="zhengzhou">郑州</option>
    <option value="shanghai" >上海</option>
</select>

<script>
    data:{
        city:''
    }
</script>

小结：<select>类型表单，v-model要收集数据，必须要给每个option配置value值，这样v-model收集的为用户选择的value值

v-model的三个修饰符

1、number：将用户输入的字符串转化为number类型数据

2、lazy：失去焦点再收集数据（提高运行效率）

3、trim：去掉首尾空格

总结（小练习）

提示：好记性不如烂笔头，一定要练习哦

<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
        <p>年龄：
            <input type="number" v-model="age"></p>
        <p>性别：
            <input type="radio" v-model="sex" value="male">男<input type="radio" v-model="sex" value="female">女</p>
        <p>爱好：
            <input type="checkbox" v-model="hobby" value="play">玩耍<input type="checkbox" v-model="hobby" value="eat">吃粮<input type="checkbox" v-model="hobby" value="drink">喝水</p>
        <p>所属校区：
            <select v-model="city">
                <option value="beijing" >北京</option>
                <option value="zhengzhou">郑州</option>
                <option value="shanghai" >上海</option>
            </select></p>
        <p>其他信息：
            <textarea placeholder="请输入其他相关信息" v-model="otherMsg"></textarea>
        </p>
        <input type="checkbox" v-model="agree"> 阅读并接受以上协议


    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                name: '',
                age: '',
                sex: '',
                hobby: [],
                hobby1: '',
                city: '',
                otherMsg: '',
                agree: ''
            },

        })
    </script>
</body>