vue-双向数据绑定获取表单form所有值

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

本文使用vue强大功能之一v-model双向数据绑定实现一键获取表单所有的值,都存在一个对象里面，使用JSON.stringify转换后直接得到ajax中就可以了

效果图如下：

具体实现代买如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            background-color: #eee;
        }
        form{
            width: 400px;
            height: 300px;
            border: 1px #000 solid;
            margin: 0 auto;
        }
        p{
            padding: 5px 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <form>
            <p>
                <label for="username">姓名:</label>
                <input type="text" v-model.number=\'user.username\' id="username" autocomplete="off">
            </p>
            <p>
                <label for="password">密码:</label>
                <input type="text" v-model=\'user.password\' id="password" autocomplete="off">
            </p>
            <p>
                <input type="checkbox" id="a" v-model=\'user.checkedNames \' value="篮球"><label for="a">篮球</label>
                <input type="checkbox" id="b" v-model=\'user.checkedNames \' value="足球"><label for="b">足球</label>
                <input type="checkbox" id="c" v-model=\'user.checkedNames \' value="排球"><label for="c">排球</label>
            </p>
            <p>
                <input type="radio" v-model=\'user.sex\' value="男" id="sex1">
                <label for="sex2">男</label>
                <input type="radio" v-model=\'user.sex\' value="女" id="sex2">
                <label for="sex2">女</label>
            </p>
            <p>
                <select name="" id="" v-model=\'user.year\'>
                    <option value="">请选择</option>
                    <option value="1997">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                </select>
            </p>
            <p>
                <input type="button" value="提交" @click="send">
            </p>
        </form>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                username: \'\',
                password: \'\',
                checkedNames: [],
                sex: \'男\',    // 默认值在这里设置才有效
                year: \'1998\'  // 默认值在这里设置才有效
            } 
        },
        methods: {
            send() {
                console.log(this.user);
                alert(JSON.stringify(this.user))
            }
        }
    })
</script>
</html>

  学无止境，感兴趣的话关注下面公众号，咱们一起交流

以上是 vue-双向数据绑定获取表单form所有值 的全部内容， 来源链接： utcz.com/z/377900.html

回到顶部