第一章 Vue核心 第十三节 收集表单数据

收集表单数据：
  若<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>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="showInfo">
            <label for="account">账号：</label><input id="account" type="text" v-model="userInfo.account"/><br/><br/>
            <label for="password">密码：</label><input id="password" type="password" v-model="userInfo.password"/><br/><br/>
            <label for="age">年龄：</label><input id="age" type="number" v-model.number="userInfo.age"/><br/><br/>
            性别：
            <input id="male" type="radio" v-model="userInfo.sex" value="male" name="sex"/><label for="male">男</label>
            <input id="female" type="radio" v-model="userInfo.sex" value="female" name="sex"/><label for="female">女</label><br/><br/>
            爱好：
            <input id="basketball" type="checkbox" v-model="userInfo.hobby" value="basketball"/><label for="basketball">打篮球</label>
            <input id="music" type="checkbox" v-model="userInfo.hobby" value="music"/><label for="music">听音乐</label>
            <input id="sing" type="checkbox" v-model="userInfo.hobby" value="sing"/><label for="sing">唱歌</label>
            <input id="book" type="checkbox" v-model="userInfo.hobby" value="book"/><label for="book">看书</label><br/><br/>
            <label>
                地址：
                <select id="address" v-model="userInfo.address">
                    <option value="">--请选择--</option>
                    <option value="China">China</option>
                    <option value="Japan">Japan</option>
                    <option value="Frank">Frank</option>
                    <option value="USA">USA</option>
                    <option value="Holland">Holland</option>
                    <option value="Italy">Italy</option>
                    <option value="Russia">Russia</option>
                    <option value="England">England</option>
                    <option value="Germany">Germany</option>
                </select>
            </label><br/><br/>
            <label>
                个人说明：
                <textarea v-model.lazy="userInfo.description"></textarea>
            </label><br/><br/>
            <label>
                <input type="checkbox" v-model="userInfo.agree" />
                我已阅读并同意<a href="https://www.baidu.com">《用户协议》</a>
            </label><br/><br/>
            <input type="submit" value="提交"/>
        </form>
    </div>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    age:0,
                    sex:'female',
                    hobby:[],
                    address:'',
                    description:'',
                    agree:false
                }
            },
            methods:{
                showInfo(){
                    console.log(this.userInfo);
                }
            }
        });
    </script>
</body>
</html>
posted @ 2021-10-14 19:35  何以之  阅读(52)  评论(0)    收藏  举报