Vueと共通

【Nuxt.js】Nuxt文法編:v-model①

前置き

文法シリーズ🌟

文法記事では毎度のことですが
文法は覚えて良いものです📚🙋‍♀️
しっかりマスターしていきましょう♪

どんな時に使うの?

form内のinputなど入力要素に使います🌟
【Nuxt.js】v-model実践編:オリジナルフォームの簡単な作り方


v-model


v-modelとは

双方向バインディングをしてくれるもの!

双方向バインディングって何だ!?
という方、簡単に言えば
スクリプトとブラウザどちらからでも
値を更新できて便利〜なものです💡

v-modelを使わなくてもできるのですが
これだけでできる便利な書き方を
糖衣構文(syntax sugar)と言います。

この2行は全く同じ意味です。

:valueはv-bind:valueです。
v-bindの記事は近々出します🌟

@inputはこちらで解説済みです。
代表的な@clickをメインに解説していますが
使い方などはほとんど同じです!
Nuxt文法編:@click

v-modelを使わない場合


使用タグ、使用可能な修飾子

v-modelといえば
inputでよく使うイメージですね!
もちろん他の入力要素にも使えます🌟
そしてコンポーネントにも!

使用タグ

<input>
<select>
<textarea>
コンポーネント

コンポーネントは親子間で使う場合なので
v-model②の記事で続きをやります💡

修飾子

.lazy - input の代わりに change イベントを購読します
.number - 有効な input の文字列を数値にキャストします
.trim - input をトリムします


テキスト入力での使用

1行

messageプロパティの値が
inputからも@clickのmethodsからも
変更できるようになっています🌟

コード

) pages


複数行

複数行なのでtextareaタグを使用。
pタグにスタイルを当てることで
複数行のテキストを扱うことができます!

コード

) pages


チェックボックスでの使用

単体

boolean値を出力しています

コード

) pages

label, inpuの書き方

<label><input type="checkbox"></label>

または

<label for="name"></label>
<input type="checkbox" id="name">


複数

valueを追加し
dataを配列にし出力

コード

) pages


ラジオボタンでの使用

基本的な使い方

コード

) pages


プルダウンでの使用

セレクトボックスともいいますね!

v-forなしver.

コード

) pages

disabled属性

初期値が空の場合(selected: '')
iOSだと1番上の選択肢が押せなくなります。
それを防止するために1番上にdisabeled属性を使用した
ダミー選択肢を置くことがおすすめ🌟


v-forありver.

コード

) pages

v-forについては
文法編:v-forをご覧ください👀


まとめ

  • v-modelはv-onとv-bindをまとめて1行で書くためのシュガーシンタックス
  • テキスト入力の場合は@input :value
  • チェックボックス、ラジオボタンの場合は@change :checked
  • プルダウンの場合は@change :value

-Vueと共通
-,

© 2024 aLiz Nuxt