Vueのフォームイベントのデータバインディングの説明
2022-01-13 21:14:53
<body>
<div id="root">
<form action="" @submit.prevent="demo">
<label for="TW"> Name:</label>
<input type="text" id="TW" v-model.trim="userInfo.account"><br><br> Password.
<input type="password" id="pa" v-model="userInfo.password"><br><br> Age.
<input type="number" v-model.number="userInfo.age"> <br><br> Gender: <input type="radio" name="sex" value="male" v-model="userInfo.sex">male
<input type="radio" name="sex" v-model="userInfo.sex" value="female">female<br><br& gt; hobby: affiliated campus:
<select v-model="userInfo.city">
<option value="school"> Please select school district</option>
<option value="beijing">Beijing</option>
<option value="shanghai">上海</option>
<option value="shenzhen">shenzhen</option>
</select>
<br><br>
<input type="checkbox" v-model="userInfo.hobby" value="study"> learn
<input type="checkbox" v-model="userInfo.hobby" value="singing"> sing
<input type="checkbox" v-model="userInfo.hobby" value="dance"> dance
<input type="checkbox" v-model="userInfo.hobby" value="game"> King<br><br> Other Info.
<textarea name="" v-model.lazy="userInfo.other"></textarea><br><br>
<input type="checkbox" v-model="userInfo.tree"> Read and accept
<a href="#">User Agreement</a><button>submit</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
userInfo: {
account: '',
password: '',
age: '',
sex: 'female',
city: 'beijing',
hobby: [],
other: '',
agree: '',
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
}
})
</script>
</body>
概要
この記事があなたのお役に立ち、Script Houseの他のコンテンツにもっと注目していただけることを願っています。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSクロスドメインソリューション リアクト構成 リバースプロキシ
-
親子コンポーネント通信を解決する3つのVueスロット
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
Vue+ElementUIによる大規模なフォームの処理例
-
Vueにシンプルなメモ帳機能を実装
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
vueのプロジェクトでモックを使用する方法を知っていますか？
-
Vueの「データを聴く」原則を解説