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をデプロイする方法

推薦する

CSS3 で複数のカスタムフォントを導入する

今日、HTML に問題を発見しました。多くのデフォルト フォントが提供されていますが、「Bold」、...

tbodyタグの魔法はテーブルコンテンツの表示を高速化します

他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...

Vuex はシンプルなショッピングカート機能を実装します

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

jar パッケージを Docker コンテナに変換する方法

jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...

Node.js を使用してパスワード ジェネレータを作成するための完全な手順

目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...

Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル

来学期にMySQLを勉強します。事前に自宅で練習していませんでした。インストールに時間がかかるとは思...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

Reactにおけるコンポーネント通信の詳細な説明

目次親コンポーネントは子コンポーネントと通信します子コンポーネントは親コンポーネントと通信しますコン...

このようなシェル スクリプトを使用して、多数の MySQL データベースを強制終了します (推奨)

朝早くに電話で起こされました。あるプロジェクトのデータベースがダウンしていて起動できないとのことでし...

JavaScript で簡単なモグラ叩きゲームを実装する

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...

MySQL主キー命名戦略関連

最近、データライフサイクル管理の詳細を整理していたときに、小さな問題を発見しました。それは、MySQ...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...