（8）Vue-收集表单数据_element input value和v-model-优快云博客

本文链接：https://blog.youkuaiyun.com/lihuihui01/article/details/122908246

本文详细介绍了Vue.js中v-model在不同类型的表单元素中如何收集数据，包括文本输入、单选按钮、复选框、选择框及文本区域等。v-model.trim用于去除输入首尾空格，v-model.number将输入转换为数字，而v-model.lazy则在失去焦点时才收集数据。此外，还展示了如何通过v-model收集数组类型的值，并演示了一个包含多个表单元素的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结：

收集表单数据:
    若:<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:输入首尾空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--容器-->
<div id="root">
    <form @submit.prevent="demo">
        <!--'  a  b  ',前后的空格都会去掉，但中间的空格不会去去掉-->
        账号：<input type="text" v-model.trim="info.userName"> <br/><br/>
        密码：<input type="password" v-model="info.password"><br/><br/>
        <!--type="number":只能输入数字；v-model.number：将输入的数字保存成数字类型-->
        年龄：<input type="number" v-model="info.age"><br/><br/>
        性别：
        男：<input type="radio" value="m" name="sex" v-model="info.sex">
        女：<input type="radio" value="f" name="sex" v-model="info.sex"><br/><br/>
        爱好：
        学习：<input type="checkbox" value="学习" v-model="info.hobby">
        打游戏：<input type="checkbox" value="打游戏" v-model="info.hobby"><br/><br/>
        所属校区:
        <select v-model="info.city">
            <option value="">请选择</option>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
        </select><br/><br/>
        其他信息：
        <!--     v-model.lazy:失去焦点的瞬间，内容才会被收集   -->
        <textarea v-model.lazy="info.other"></textarea><br/><br/>

        <input type="checkbox" v-model="info.agree">阅读并接受<a href="http://baidu.com">《用户协议》</a><br/><br/>

        <button>提交</button>
    </form>

    {{info}}

</div>


<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            info: {
                userName: '',
                password: '',
                sex: '',
                age: '',
                hobby: [],
                city: '',
                other: '',
                agree: ''
            }
        },
        methods: {
            demo() {
              //JSON.stringify(this.info):将对象转成json
                console.log(JSON.stringify(this.info))
            }
        }
    })
</script>
</body>
</html>