Vue学习：收集表单数据 form-input 与v-model

最新推荐文章于 2024-01-24 14:25:25 发布

¡Venceremo

最新推荐文章于 2024-01-24 14:25:25 发布

阅读量534

点赞数

分类专栏： Vue 文章标签： vue.js 学习前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129033401

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

如何使得点击文字，也可以获得表单数据的焦点使用label

label for="demo"> 账号：</label>
           <input type="text" id="demo">

v-model默认收集input框的value值 text类型输入值等于value值

            <label for="demo1">账号：</label>
            <input type="text" id="demo1" v-model="account"><br>
            <label for="demo2">密码：</label>
            <input type="password" id="demo2" v-model="password"><br>

   account:'',
     password:'',

二选一，radio时候没有value ,需要特意添加value值 radio

 性别：
            <label for="demo3">男</label>
            <input type="radio" id="demo3" name="sex" v-model="sex" value="male">
            <label for="demo4">女</label>
            <input type="radio" id="demo4" name="sex" v-model="sex" value="female"><br>

   sex:'female',//设置默认值

多选多checkbox：可以勾选和取消勾选的输入框的双向绑定的实现：也必须实现value的手动编写，否则Vue实现的是对其中的某一个标签的的checked（即是否被勾选的值）

点击一个，会使得hobby=ture,双向绑定，会让其他的进行选上

hobby初始值会影响v-model收集回来的数据要写成数组形式

  爱好：
            <label for="demo5">学习</label>
            <input type="checkbox" id="demo5" v-model="hobby" value="study">
            <label for="demo6">打游戏</label>
            <input type="checkbox" id="demo6" v-model="hobby" value="game">
            <label for="demo7">吃饭</label>
            <input type="checkbox" id="demo7" v-model="hobby" value="eat">

    data: {
                account: '',
                password: '',
                sex: 'female',//设置默认值
                hobby:[],



            },

select-option 选择框

            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="beijing">北京校区</option>
                <option value="shanghai">上海校区</option>
                <option value="shenzhen">深圳校区</option>
                <option value="wuhan">武汉区</option>
            </select>

  city:'',

 city:'beijing',

默认选择

多行输入输入就是value

 <textarea v-model="other"></textarea><br>

 other:'',

checkbox 是否确定false true

   <input type="checkbox" v-model="agree">阅读并接受<a href="#">《用户协议》</a>

  agree:''

另外在表单数据中存在提交按钮，会引起表单的提交会存在默认的跳转页面，也即是刷新。表单提交可以绑定一个@submit 绑定一个方法组织默认行为 prevent

输出的是json格式的

<form @submit.prevent="demo">
            methods: {
                demo(){
                    //需要提交表单内的信息
                    console.log(JSON.stringify(this._data))

                }
            },

然后可以进行优化（不直接使用_date）

            methods: {
                demo() {
                    //需要提交表单内的信息
                    console.log(JSON.stringify(this.userInfo))

                }
            },

v-model修饰符：比如想要输入的内容是数字类型的数据 v-model.number

但是收集的是字符串数据类型实际需要时数字类型的数据

<label for="demo8">年龄：</label>
            <input type="number" id="demo8" v-model.number="userInfo.age"><br>

v-model修饰符：延迟收到输入的内容当失去焦点才进行收集 v-model.lazy

  <textarea v-model.lazy="userInfo.other"></textarea><br>

v-model修饰符：去掉前后空格 v-model.trim

  <input type="text" id="demo1" v-model.trim="userInfo.account"><br>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>

<body>
    <!-- 计算属性实现 -->
    <!-- 准备容器 -->
    <div id='root'>
        <form @submit.prevent="demo">
            <label for="demo1">账号：</label>
            <input type="text" id="demo1" v-model.trim="userInfo.account"><br>
            <label for="demo2">密码：</label>
            <input type="password" id="demo2" v-model="userInfo.password"><br>
            <label for="demo8">年龄：</label>
            <input type="number" id="demo8" v-model.number="userInfo.age"><br>
            性别：
            <label for="demo3">男</label>
            <input type="radio" id="demo3" name="sex" v-model="userInfo.sex" value="male">
            <label for="demo4">女</label>
            <input type="radio" id="demo4" name="sex" v-model="userInfo.sex" value="female"><br>
            爱好：
            <label for="demo5">学习</label>
            <input type="checkbox" id="demo5" v-model="userInfo.hobby" value="study">
            <label for="demo6">打游戏</label>
            <input type="checkbox" id="demo6" v-model="userInfo.hobby" value="game">
            <label for="demo7">吃饭</label>
            <input type="checkbox" id="demo7" v-model="userInfo.hobby" value="eat">
            <br>
            <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.lazy="userInfo.other"></textarea><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
            <br>
            <button>提交</button>

        </form>

    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age:'',
                    sex: 'female',//设置默认值
                    hobby: [],
                    city: '',
                    other: '',
                    agree: '',

                }

            },
            methods: {
                demo() {
                    //需要提交表单内的信息
                    console.log(JSON.stringify(this.userInfo))

                }
            },

        });
    </script>
</body>

</html>

收集表单数据总结

<input type="text" v-model收集的时value值用户输入的就是value值

<input type="radio" v-model收集的时value值并且需要给标签配置value值

<input type="checkbox"

v-model收集的时checked值(勾选不勾选得出的时布尔值) 需要配置value属性

v-model的初始值时非数组，收集的就是布尔值

V-model初始值时数组，收集的就是value组成的数组

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

lazy:失去焦点再收集数据

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

trim：输入的字符进行首尾空格过滤