Vue—收集表单数据

最新推荐文章于 2024-01-16 15:29:03 发布

糖醋小排顾。

最新推荐文章于 2024-01-16 15:29:03 发布

阅读量169

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Guuiabc/article/details/128751588

Vue学习专栏收录该内容

63 篇文章

订阅专栏

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

<body>
    <div id="root">
        <form @submit.prevent="demo">
            <!--trim会去除前后的空格-->
            账号：<input type="text" v-model.trim="userInfo.account"><br>
            密码：<input type="password" v-model="userInfo.password"><br>
            <!--.number可以将输入的类型转化为数字格式，防止后端数据库读入数据时报错-->
            年龄：<input type="number" v-model.number="userInfo.age"><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male"><br>
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><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">
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br>
            其他信息：
            <textarea v-model="userInfo.other"></textarea><br>
            <!--lazy不会没修改一个字符就进行收集，提交的时候收集-->
            <input type="checkbox" v-model.lazy="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><br>
            <button>提交</button>
        </form>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
          userInfo:{
            account:'',
          password:'',
          age:'',
          sex:'',
          //一定要是数组类型的
          hobby:[],
          city:[],
          other:'',
          agree:''
          }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>