LoginSignup
0
0

More than 3 years have passed since last update.

Vue.jsまとめ⑧ v-model

Posted at

下書きが上限に達しているので仮の状態で投稿しています

textarea, inputタグ内でv-model="データ"で双方向データバインディング
入力したらデータを書き換える

v-modelの修飾子
.lazy
フォーカスを外した時に反映させる
.number
typeをナンバーに統一
.trim
前後の空白をカット

textareaの改行を適用させるには
preタグ or style="white-space: pre;"

単体チェックボックスのv-modelはブーリアン(true or false)
複数のチェックボックスの時はv-modelに入れるデータは配列になる(中身は空でおk)
ラジオボタンのv-modelに入れる値はvalueのどれか
セレクトボックスの選択肢はv-forを使う。v-modelはselectタグ内に付ける。初期値は選択肢のどれか

v-modelの中身

textの場合

:value="eventData.title"
@input="eventData.title = $event.target.value"

コンポーネントタグの場合

:value="eventData.title"
@input="eventData.title = $event"

exportに
props:["value"]
input内に
:value="value"
@input="$emit('input', $event.target.value)"

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0