收集表单数据

收集普通输入框数据

通过 v-model 双向绑定账号和密码数据。

代码

html

<body>
    <div id="root">
        <form>
            <div>
                <label for="account">账号</label>
                <input type="text" v-model="info.account">
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" v-model="info.password">
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    account: '',
                    password: '',
                }
            }
        })
    </script>
</body>

接收单选按钮数据

绘制页面时，性别单选按钮并没有绑定 value 值（没有 value 这个属性），Vue 通过 v-model 绑定时，回去找表单的 value 值，如果想拿到性别，必须给 input 绑定 value

代码

html

<body>
    <div id="root">
        <form>
            <div>
                <label>性别</label>
                <input type="radio" name="sex" value="1" v-model="info.sex"> 男
                <input type="radio" name="sex" value="0" v-model="info.sex"> 女
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    sex: ''
                }
            }
        })
    </script>
</body>

接收多个复选框数据

同样道理，如果想获取复选框的数据，首先要给每个复选框绑定不同的 value 值。
值得注意的是，复选框一般是成组出现的，而且在选择的时候也可以选择多个，那么存储复选框数据时要用数组。单个复选框可以不使用数组，这点在下面会提到。

代码

html

<body>
    <div id="root">
        <form>
            <div>
                <label>爱好</label>
                <input type="checkbox" value="study" v-model="info.hobby"> 学习
                <input type="checkbox" value="eat" v-model="info.hobby"> 吃饭
                <input type="checkbox" value="sleep" v-model="info.hobby"> 睡觉
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    hobby: []
                }
            }
        })
    </script>
</body>

接收下拉列表数据

下拉列表不同于输入框的是，下拉列表是由 select 标签包裹起来的，内部包含多个 option 标签。
要想获取下拉列表选中项，必须给每个 option 绑定 value 值。
在 select 标签中使用 v-model 即可获取下拉列表选中的数据。

代码

html

<body>
    <div id="root">
        <form>
            <div class="item">
                <label>所在城市</label>
                <select v-model="info.address">
                    <option value="nmg">内蒙古</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="wh">武汉</option>
                    <option value="sz">深圳</option>
                </select>
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    address: ''
                }
            }
        })
    </script>
</body>

接收文本域数据

绑定文本域和绑定普通输入框一样，直接在文本域标签中加入 v-model 即可。

代码

html

<body>
    <div id="root">
        <form>
            <div>
                <label for="introduce">简介</label>
                <textarea id="introduce" v-model="info.introduce"></textarea>
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    introduce: ''
                }
            }
        })
    </script>
</body>

接收单个复选框数据

和多个复选框比，接收单个复选框数据时，数据类型使用布尔值而不是数组，初始值可以随意。

代码

html

<body>
    <div id="root">
        <form>
            <div>
                <input type="checkbox" v-model="info.state"><p>已阅读<a href="https://blog.igma.ink">《用户协议》</a></p>
            </div>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    state: ''
                }
            }
        })
    </script>
</body>

v-model 常用的修饰符

.number

作用：接收数值型数据。
应用场景：用户年龄、计数等。

.trim

作用：把接收到的数据前后去除空格。
应用场景：文本域或文本输入框。

.lazy

作用：当输入框失去焦点时，处理数据。
适用场景：文本域。原因在文本域中每输入一个字符都会更新一下 Vue 中的暂存数据，这样可能会影响性能，这是可以使用这个修饰符，当文本域失去焦点时，更新暂存数据。

表单提交

表单数据暂存

在上面提到，通过 v-model 对表单中各种数据进行双向绑定，Vue 会对这些数据进行暂存，也就是当我们刷新页面或提交表单数据时，所有内容会清空。

提交数据

在实际开发中，通常情况下回将用户输入的数据通过 Ajax 发给后端，由后端进行处理。
在 form 标签中有个处理表单提交的事件，名为 @submit ,通过这个事件可以判断用户是否点击了提交按钮。

代码

html

<body>
    <div id="root">
        <form @submit.prevent="updata">
            <div class="item">
                <label for="account">账号</label>
                <input type="text" id="account" v-model="info.account">
            </div>
            <div class="item">
                <label for="password">密码</label>
                <input type="password" id="password" v-model="info.password">
            </div>
            <div class="item">
                <label for="age">年龄</label>
                <input type="number" id="age" v-model.number="info.age">
            </div>
            <div class="item">
                <label>性别</label>
                <input type="radio" name="sex" value="1" v-model="info.sex"> 男
                <input type="radio" name="sex" value="0" v-model="info.sex"> 女
            </div>
            <div class="item">
                <label>爱好</label>
                <input type="checkbox" value="study" v-model="info.hobby"> 学习
                <input type="checkbox" value="eat" v-model="info.hobby"> 吃饭
                <input type="checkbox" value="sleep" v-model="info.hobby"> 睡觉
            </div>
            <div class="item">
                <label>所在城市</label>
                <select v-model="info.address">
                    <option value="">请选择城市</option>
                    <option value="nmg">内蒙古</option>
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="wh">武汉</option>
                    <option value="sz">深圳</option>
                </select>
            </div>
            <div class="item">
                <label for="introduce">简介</label>
                <textarea id="introduce" v-model="info.introduce"></textarea>
            </div>
            <div class="item">
                <input type="checkbox" v-model="info.state"><span>已阅读<a href="https://blog.igma.ink">《用户协议》</a></span>
            </div>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                info: {
                    account: '',
                    password: '',
                    age: '',
                    sex: '',
                    hobby: [],
                    address: '',
                    introduce: '',
                    state: ''
                }
            },
            methods: {
                updata(){
                    console.log(this.info);
                }
            }
        })
    </script>
    <style>
        .item {
            margin: 20px 0;
        }
    </style>
</body>

点击提交按钮后

收集表单数据 ​

收集普通输入框数据 ​

接收单选按钮数据 ​

接收多个复选框数据 ​

接收下拉列表数据 ​

接收文本域数据 ​

接收单个复选框数据 ​

v-model 常用的修饰符 ​

.number ​

.trim ​

.lazy ​

表单提交 ​

表单数据暂存 ​

提交数据 ​

收集表单数据

收集普通输入框数据

接收单选按钮数据

接收多个复选框数据

接收下拉列表数据

接收文本域数据

接收单个复选框数据

v-model 常用的修饰符

.number

.trim

.lazy

表单提交

表单数据暂存

提交数据