【Vue.js】フォーム入力バインディングのサンプル集

Web

フォーム入力バインディングの基本

Vue.jsでは、v-modelディレクティブにより双方向のデータバインディングができます。

データバインディングについては次の記事を参考にしてください。

【Vue.js】データバインディングについて
Vue.jsではデータとDOMが関連付けられています。つまりデータの更新と共にDOMが更新されるため、動的にページを変化させることができます。今回はそのデータバインディングについて紹介します。

この双方向のデータバインディングの使い方としてサンプルを紹介します。

フォーム入力バインディングのサンプル

input

See the Pen
eYYOLOz
by b1san (@b1san1)
on CodePen.

radio

See the Pen
rNNBZxj
by b1san (@b1san1)
on CodePen.

checkbox

See the Pen
LYYPJPO
by b1san (@b1san1)
on CodePen.

データは、単体のチェックボックスの場合は真偽値(true/fasle)、複数のチェックボックスの場合はチェックされた項目の値をもつ配列になります。

select

See the Pen
yLLBxYe
by b1san (@b1san1)
on CodePen.

データは、単一選択の場合は選択された値、複数選択の場合は選択された値の配列になります。

date

See the Pen
abboaZL
by b1san (@b1san1)
on CodePen.

dateの値は、yyyy-mm-ddとなります。

color

See the Pen
KKKPxgV
by b1san (@b1san1)
on CodePen.

colorの値は、色コード(#000000など)になります。

file

See the Pen
OJJLoRY
by b1san (@b1san1)
on CodePen.

fileでは、フォーム入力バインディグはできません。変わりにchangeイベントによってデータの更新を行います。

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました