Vueでフォームデータを取得する方法

必要

Vue を使用して次のようにユーザーデータを収集します。

ここに画像の説明を挿入

データを取得して送信する

コード実装:

値の値を変数属性にバインドする

v-model.trim = 'username' ; 両端のスペースを削除します

v-model.number = 'age'；文字列を数値に変換する

v-model.lazy = 'age' ；すぐには収集されませんが、フォーカスを切り替えた後に収集されます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>フォームデータを取得する</title>
    <script src="/static/js/vue.js"></script>
</head>
<本文>
    <div id="コンテナ">
        <フォームアクション="" @submit.prevent="送信">
            <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>
            <!-- タイプは数値です。数値のみが許可されます。入力は文字列でもかまいません -->
            <!-- v-model.number、入力文字列を数値に変換します -->
            <input type="number" name="age" v-model.number="user.age"><br>
            <label for="">性別:</label>
            <!-- 異常な入力 -->
            <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="">趣味:</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>
            </選択>
            <br>
            <!-- テキスト ボックス -->
            <label for="">説明:</label><br>
            <テキストエリア名="desc" v-model="user.desc"></テキストエリア>
            <br>
            <!-- プロトコル -->
            <input type="checkbox" name="agree" v-model="user.agree"><a href="http://www.baidu.com">利用規約</a>を読んで同意してください
            <!-- 送信するにはボタンをクリックしてください-->
            <button :style="{display:'block',backgroundColor:'lightblue',}">送信</button>
            <!-- 送信 -->
            <!-- <input type="submit" value="送信"> -->
        </フォーム>
    </div>

    <スクリプト>
        Vue.config.productionTip = false
        新しいVue({
            el: "#コンテナ",
            データ： {
                ユーザー: {
                    ユーザー名: "",
                    パスワード: "",
                    年： ""、
                    性別: "",
                    趣味： []、
                    市： ""、
                    説明: "",
                    同意する： ""、
                }
            },
            メソッド: {
                送信(イベント){
                    console.log("フォームを送信")
                    // フォームでは、パラメータが自動的に送信されます console.log(JSON.stringify(this.user))
                },
            },
        })
    </スクリプト>
</本文>
</html>

テンプレートフィルター

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>テンプレート フィルター</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/dayjs.min.js"></script>
</head>
<本文>
    <div id="コンテナ">
        <!-- フィルター -->
        <span>{{ 時間 | 時刻フォーマッタ}}</span><br>
        <!-- パラメータ渡しフィルタの最初のパラメータは常にパイプライン データです -->
        <span>{{ 時間 | timeFormatter("YY-MM-DD hh:mm:ss")}} </span>
        <!--複数のフィルターを直列に接続することもできます-->
    </div>
    <スクリプト>
        Vue.config.productionTip = false
        //グローバルフィルター、すべてのコンポーネントで使用可能 Vue.filter("myFilter", function(value){
        	'グローバルフィルタリング'を返す
        })
        新しいVue({
            el: "#コンテナ",
            データ： {
                time: 1639579694662, //タイムスタンプ、文字列ではない},
			// コンポーネントフィルター内で使用されるローカルフィルター: {
                timeFormatter(時間、フォーマット){
                    // 最初のパラメータ if (format) {
                        dayjs(time).format(format) を返します。
                    }それ以外{
                        dayjs(time).format("YYYY-MM-DD HH:mm:ss") を返します。
                    }
                },
            },
        })
    </スクリプト>
</本文>
</html>