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

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));
                }
            }
        })
    </スクリプト>
</本文>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueフォームバインディングとコンポーネントの詳細な説明
  • Vue フォームに動的にコンポーネントを追加する実例
  • Vue ループ コンポーネントと検証マルチフォーム検証の例
  • Vue フォーム入力バインディング v-model
  • Vue のフォームとコンポーネントの二重バインディングをご存知ですか?

<<:  ラベルとスパンの幅設定が無効である問題の解決

>>:  Dockerでk8sをデプロイする方法

推薦する

Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...

Vueログイン機能の実装

目次前面に書かれたログインの概要ログインビジネスプロセスログインサービスの関連技術ポイントログイント...

Bツリー挿入プロセスの概要

前回の記事 https://www.jb51.net/article/154153.htm では、B...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

MySQL全文検索の使用例

目次1. 環境整備2. データの準備3. ショーを始める4. 単語分割エンジン要約する参考文献1. ...

MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する

今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

JavaScriptは4桁のランダム検証コードの生成を実装します

この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...