Vue 表单数据收集

文本框

示例：

账号：<input type="text" v-model.trmi="userInfo.account">

密码：<input type="password" v-model="userInfo.password">

签名：<textarea v-model.lazy="userInfo.other"></textarea>

年龄：<input type="number" v-model.number="userInfo.age">

v-model.trmi：过滤掉内容左右两边的的空格，但内容中的空格没法过滤

v-model.lazy：失去焦点再收集数据

v-model.number：输入字符串转为有效的数字


单选框

示例

性别：

男<input type="radio" v-model="userInfo.sex" name="sex" value="男">

女<input type="radio" v-model="userInfo.sex" name="sex" value="女">

同一类型的单选框需要设置同一个 name 如：name="sex"

需要为每一个单选框设置 value 值才能收集到数据


<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>

这里未设置 value 值，收集 checked（勾选 or 未勾选，是布尔值）


多选框与下拉框

多选框示例

爱好：

吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭">

睡觉<input type="checkbox" v-model="userInfo.hobby" value="睡觉">

喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">

下拉框示例

<select v-model="userInfo.city">
    <option value="">请选择地区</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="深圳">深圳</option>
    <option value="广州">广州</option>
</select>

需要每一项设置 value 值


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <form @submit.prevent="demo">
        账号：<input type="text" v-model.trmi="userInfo.account">
        <br><br>
        密码：<input type="password" v-model="userInfo.password">
        <br><br>
        性别：
        男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
        女<input type="radio" v-model="userInfo.sex" name="sex" value="女">
        <br><br>
        年龄：<input type="number" v-model.number="userInfo.age">
        <br><br>
        爱好：
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭">
        睡觉<input type="checkbox" v-model="userInfo.hobby" value="睡觉">
        喝水<input type="checkbox" v-model="userInfo.hobby" value="喝水">
        <br><br>
        所在地区：
        <select v-model="userInfo.city">
            <option value="">请选择地区</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
            <option value="广州">广州</option>
        </select>
        <br><br>
        签名：
        <textarea v-model.lazy="userInfo.other"></textarea>
        <br><br>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
        <br><br>
        <button>提交</button>
    </form>
</div>
</body>

<script>
    new Vue({
        el: "#root",
        data: {
            userInfo: {
                account: '',
                password: '',
                sex: 'male',
                age: '',
                hobby: [],
                city: '',
                other: '',
                agree: false
            }
        },
        methods: {
            demo() {
                alert('提交成功')
                console.log(JSON.stringify((this.userInfo)))
            }
        }
    })
</script>
</html>

posted @ 2022-04-14 15:30  春暖花开鸟  阅读(77)  评论(0)    收藏  举报