Vue2基础篇-17-收集表单_vue 空白收集表制作-CSDN博客

本文链接：https://blog.csdn.net/Hmj050117/article/details/128224816

1. demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 收集表单</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="account">请输入账户</label>
            <input type="text" id="account" v-model.trim="account"> <br><br>

            <label for="passWord">请输入密码</label>
            <input type="text" id="passWord" v-model="passWord"> <br><br>

            <label for="age">请输入年龄</label>
            <input type="number" id="age" v-model.number="age"> <br><br>

            <label for="sex">请选择性别</label><br><br>
            男 <input type="radio" name="sex" id="sex" v-model="sex" value="man">
            女 <input type="radio" name="sex" id="sex" v-model="sex" value="woman"> <br><br>


            <label for="hobby">请选择爱好</label><br><br>
            学习： <input type="checkbox" id="hobby" v-model="hobby" value="study">
            打游戏： <input type="checkbox" id="hobby" v-model="hobby" value="paly">
            吃饭： <input type="checkbox" id="hobby" v-model="hobby" value="eat"><br><br>

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

            其他信息
            <textarea v-model.lazy="other">
            </textarea><br><br>
            <input type="checkbox" v-model="agree"> 阅读同意信息

            <!-- 表单提交默认就是跳转，同时刷新页面 -->
            <button>提交</button>
        </form>
        <script text="text/javascript">
            new Vue({
                el: "#root",
                data: {
                    account: "",
                    passWord: "",
                    sex: "",
                    hobby: [],
                    school: "",
                    age: "",
                    other: "",
                    agree: ""
                },
                methods: {
                    demo() {
                    }
                }
            })
        </script>
    </div>
</body>
</html>

2. 小总结

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