园龄：3年5个月粉丝：9 关注：0

第一章 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>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15408171.html

posted @ 2021-10-14 19:35 何以之阅读(42) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

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

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

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

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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