Vue收集表单数据

2023-10-11 09:13:28

直接看例子吧。

<body>
    <div id="root">
        <form @submit.prevent="submit">
            账号：<input type="text" v-model.trim="userInfo.account"><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            性别：
            男<input type="radio" value="male" v-model="userInfo.gender">
            女<input type="radio" value="female" v-model="userInfo.gender"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            爱好：
            吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
            睡觉<input type="checkbox" value="sleep" v-model="userInfo.hobby">
            打豆豆<input type="checkbox" value="beat" v-model="userInfo.hobby"><br><br>
            所在城市：
            <select v-model="userInfo.city" multiple>
                <option value="">请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select><br><br>
            其他信息：<textarea v-model.lazy="userInfo.otherInfo"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受  <a href="http://www.baidu.com">《用户协议》</a><br><br>
            <button>提交</button>
        </form>
    </div>
    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data:{
            userInfo:{
                account:"",
                password:"",
                age:"",
                gender:"",
                hobby:[],
                city:"",
                otherInfo:"",
                agree:""
            }
        },
        methods: {
            submit(){
                console.log(JSON.stringify(this.userInfo));
            }
        },
    })
    </script>
</body>

v-model的使用

对于单行文本框，用户输入的值就是value值，v-model要收集的就是这个value值。
对于多行文本框，用户输入的值就是value值，v-model要收集的就是这个value值。
对于单选框，要配置value值，v-model收集的就是这个value值。
对于复选框，要配置value值。
- 如果v-model的初始化值是一个字符串，则v-model收集到的是checked，一个布尔值（true或false，勾选或未勾选）。
- 如果v-model的初始化值是一个数组，则v-model收集到的是value组成的数组。
对于选择框，要配置option的value值。
- 如果是单选，则v-model收集的是选中的option的value值。
- 如果是多选，则v-model收集的是选中的option的value组成的数组。

v-model修饰符

.number，将输入的字符串转换为数字。
.lazy，失去焦点时再收集数据。
.trim，过滤字符串首尾空格。

码农公寓

v-model的使用

v-model修饰符

相关文章