（静止画012）（フォームデータ収集フォームデータへの必要性によって提出された）自動ハンドVueのフォームデータを設定しました

私は自動的に収集するデータを入力すると自動的に収集し、それは私が送信ボタンをクリックして、データは良いが収集され、あります

1. Vモデル自動収集フォームデータ

1）テキスト/ textare ----単一行/複数行の入力ボックス

2）チェックボックス----複数の選択肢

3）無線----ラジオ

4）----ドロップダウンボックスを選択します

2。

3.test012.html

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 
の<divのid = "デモ"> 
   < ！ -防ぐ阻止默认行为- >。
     <フォームアクション= "/ xxxは" @ submit.prevent = "handleSubmit"> 
        <span>を用户名：</ span>の
        の<input type = "text" Vモデル=」ユーザ名"> <BR> 

        の<span>密码：</ span>の
        の<input type ="パスワード"Vモデル= "PWD"> <BR> 

        の<span>性别：</ span>の
        <！ -値="女"希望女被选中- >
         の<input type ="ラジオ"ID ="女性の"値= "女" Vモデル= "セックス"> 
        <ラベル= "女">女</ label>は
        <入力タイプ= "ラジオ" ID = "男性"値= "男" Vモデル="セックス"> 
        <=のラベル"男性">男</ label>は<BR>

        <スパン>爱好：</ span>の
        の<input type = "チェックボックス" ID = "バスケット"値= "バスケット" Vモデル=は"好き"> 
        篮球</ label>は<= "バスケット"のラベル> 
        の<input type = "チェックボックス" ID = "サッカー"の値は= "足" Vモデルは= "好き"> 
        <= "サッカー">足球</ label>はラベル
        の<input type = "チェックボックス" ID = "ゴルフ"値=」ゴルフ」V-モデル=は"好き"> 
        <=のラベル"ゴルフ">高尔夫</ label>は
        <入力タイプ= "チェックボックス" ID = "vollay"値= "vollay" V-モデル=は""好き> 
        <ラベル= "vollate">排球</ label>は<BR>用

        <スパン>市：</ span>の
        <モデル-SELECT V = "cityId"> 
            <オプションの値は= "">選択されていない</オプション> 
            <！ -最後の提出が最後のIDであり、値がそう=「city.id 「city.idテキストので、それが書かれている：値を - >
            <オプション：値= "city.id" V-ため= "allCitysに（都市、インデックス）"：キー= "インデックス"> {{city.name}} </オプション> 
        </選択> <BR> 
        <スパン>介绍</スパン> 
        <TEXTAREA行= "10" Vモデル= "説明"> </ TEXTAREA> <br>ログイン

        の<input type =値を"送信" = "注册"> 
    </フォーム> 
< / DIV> 

ます。<script type = "text / javascriptの" SRC = "../ JS / vue.js "> </ SCRIPT> 
ます。<script type =" text / javascriptの"> 
    新しいヴュー（{ 
        エル： '＃デモ'、
        データ：{ 
            ユーザー名： ''、
            PWD： ''、
           // F値は、の値と一致する
             性別： 'F'、
            //アレイは複数から選択されるべき
             お気に入り：[ '足']、
            allCitys：[{ID :. 1、名称： 'BJ'}、{ID：2、名称： 'SH'}、{ ID：3、名称： 'GD'}]、
            cityId：3' 」。、
            説明： '' 
        }、
        メソッド：{ 
            handleSubmit（）{ 
                にconsole.log（this.username、this.pwd、this.sex、this.likes、this.cityId、this.description）
            } 
        } 
    } ）
</ SCRIPT> 
</ BODY> 
</ HTML> 
4.提出]をクリックし、コンソールコンソールによって提出されたデータを見ることができます。また、VUEで見ることができます

（静止画012）（フォームデータ収集フォームデータへの必要性によって提出された）自動ハンドVueのフォームデータを設定しました

おすすめ