Vue獲取表單數(shù)據(jù)的方法

更新時(shí)間：2021年12月17日 16:20:11 作者：laufing

這篇文章主要為大家介紹了Vue獲取表單數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

需求

使用Vue收集如下用戶數(shù)據(jù)：

在這里插入圖片描述

獲取數(shù)據(jù)并提交

代碼實(shí)現(xiàn)：

將value的值與變量屬性進(jìn)行綁定

v-model.trim = ‘username' ; 去除兩端空格

v-model.number = ‘a(chǎn)ge'；將字符串轉(zhuǎn)為數(shù)值

v-model.lazy = ‘a(chǎn)ge' ； 不是立即收集，而是切換焦點(diǎn)后收集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>獲取表單數(shù)據(jù)</title>
    <script src="/static/js/vue.js"></script>
</head>
<body>
    <div id="container">
        <form action="" @submit.prevent="submit">
            <label for="username">用戶名:</label><br>
            <input type="text" class="username" name="username" placeholder="輸入用戶名" v-model.lazy="user.username"><br>
            <label for="password">密碼:</label><br>
            <input type="password" class='password' name="password" placeholder="輸入密碼" v-model="user.password"><br>
            <label for="age">年齡:</label><br>
            <!-- type is number，只允許輸入數(shù)字；input中也是字符串 -->
            <!-- v-model.number，將input的字符串轉(zhuǎn)為數(shù)值 -->
            <input type="number" name="age" v-model.number="user.age"><br>
            <label for="">性別:</label>
            <!-- 非正常的input -->
            <input type="radio" name="sex" v-model="user.sex" value="female">女
            <input type="radio" name="sex" v-model="user.sex" value="male">男
            <br>
            <!-- 多選 -->
            <label for="">愛(ài)好:</label>
            <input type="checkbox" v-model="user.hobby" value="pingpong">乒乓球
            <input type="checkbox" v-model="user.hobby" value="basketball">籃球
            <input type="checkbox" v-model="user.hobby" value="football">足球
            <br>
            <!-- 下拉選框 -->
            <span>選擇城市:</span><br>
            <select name="city" v-model="user.city" id="">
                <option value="">選擇城市</option>
                <option value="zz">鄭州</option>
                <option value="wh">武漢</option>
                <option value="bj">北京</option>
            </select>
            <br>
            <!-- 文本框 -->
            <label for="">描述:</label><br>
            <textarea name="desc" v-model="user.desc"></textarea>
            <br>
            <!-- 協(xié)議 -->
            <input type="checkbox" name="agree" v-model="user.agree">閱讀并接受<a >《用戶協(xié)議》</a>
            <!-- 點(diǎn)擊按鈕 提交 -->
            <button :style="{display:'block',backgroundColor:'lightblue',}">提交</button>
            <!-- submit 提交 -->
            <!-- <input type="submit" value="提交"> -->
        </form>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#container",
            data: {
                user: {
                    username: "",
                    password: "",
                    age: "",
                    sex: "",
                    hobby: [],
                    city: "",
                    desc: "",
                    agree: "",
                }
            },
            methods: {
                submit(event){
                    console.log("提交表單")
                    // 在form內(nèi)，參數(shù)自動(dòng)提交
                    console.log(JSON.stringify(this.user))
                },
            },
        })
    </script>
</body>
</html>

模板過(guò)濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板過(guò)濾器</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/dayjs.min.js"></script>
</head>
<body>
    <div id="container">
        <!-- 過(guò)濾器 -->
        <span>{{ time | timeFormatter}}</span><br>
        <!-- 傳參數(shù)的過(guò)濾器 第一個(gè)參數(shù)永遠(yuǎn)是管道數(shù)據(jù)-->
        <span>{{ time | timeFormatter("YY-MM-DD hh:mm:ss")}}	</span>
        <!--也可以多個(gè)過(guò)濾器串聯(lián)-->
    </div>
    <script>
        Vue.config.productionTip = false
        //全局過(guò)濾器，所有組件中都可以使用
        Vue.filter("myFilter", function(value){
        	return '全局過(guò)濾'
        })
        new Vue({
            el: "#container",
            data: {
                time: 1639579694662, //時(shí)間戳，不是字符串
            },
			//局部過(guò)濾器，組件內(nèi)部使用
            filters: {
                timeFormatter(time, format){
                    // 第一個(gè)參數(shù)
                    if(format){
                        return dayjs(time).format(format)
                    }else{
                        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
                    }
                },
            },
        })
    </script>
</body>
</html>