Vueフォームイベントデータバインディングの詳細な説明

<本文>
    <div id="ルート">
        <フォームアクション="" @submit.prevent="デモ">
            <label for="TW"> 名前:</label>
            <input type="text" id="TW" v-model.trim="userInfo.account"><br><br> パスワード:
            <input type="password" id="pa" v-model="userInfo.password"><br><br> 年齢:
            <input type="number" v-model.number="userInfo.age"> <br><br> 性別: <input type="radio" name="sex" value="male" v-model="userInfo.sex">男性<input type="radio" name="sex" v-model="userInfo.sex" value="female">女性<br><br> 趣味: キャンパス:
            <v-model="userInfo.city">を選択します。
                <option value="school">キャンパスを選択してください</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
               <option value="shenzhen">深セン</option>
            </選択>
            <br><br>
            <input type="checkbox" v-model="userInfo.hobby" value="study"> 勉強<input type="checkbox" v-model="userInfo.hobby" value="sing"> 歌う<input type="checkbox" v-model="userInfo.hobby" value="dance"> ダンス<input type="checkbox" v-model="userInfo.hobby" value="game"> キング<br><br> その他の情報:
            <textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree"> <a href="#">利用規約</a>を読んで同意します。<button>送信</button>
        </フォーム>
    </div>
    <スクリプト>
        Vue.config で productionTip を false に設定します。
        新しいVue({
            el: '#root',
            データ： {
                ユーザー情報: {
                    アカウント： ''、
                    パスワード: ''、
                    年： ''、
                    性別: 「女性」、
                    都市: '北京'、
                    趣味： []、
                    他の： ''、
                    同意する： ''、
                }
            },
            メソッド: {
                デモ() {
                    console.log(JSON.stringify(this.userInfo));
                }
            }
        })
    </スクリプト>
</本文>