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

Vue は、フォーム要素用の v-model ディレクティブを提供します。

双方向データバインディング

v-modelでバインドされる要素はすべて「双方向データバインディング」の機能を持っています。

双方向データバインディングとは、データ内のデータからページがレンダリングされ、データ内のデータが変更されるとページが自動的に更新され、ページが操作されるとそれに応じてデータ内のデータも変更されることを意味します。

v モデルの使用

1.入力ボックス

入力ボックスに v-model 属性をバインドすると、v-model の属性値を通じてユーザーが入力した内容をリアルタイムに取得できます。

<input type="text" v-model="name">

       data() {
            return {
                name:'zhangsan'
            }
        },

2.チェックボックス

(1) シングルチェックボックス

v-model 属性を 1 つのチェックボックスにバインドすると、v-model 属性値 true または false の値によって、チェックボックスを選択するかどうかを制御できます。

<input type="checkbox" v-model="isChecked">

       data() {
            return {
                isChecked:true
            }
        },

(2) 複数のチェックボックス

同じ v-model 属性を複数のチェックボックスにバインドし、チェックボックスの値が v-model 配列にあるかどうかを判断して、チェックボックスのオン/オフを制御します。同時に、操作チェックボックスをオンまたはオフにすると、配列内で追加または削除するチェックボックスの値も同期的に更新されます。

        <div>
            <input type="checkbox" value="eat" v-model="checkeds">吃饭
            <input type="checkbox" value="sleep" v-model="checkeds">睡觉
            <input type="checkbox" value="hit" v-model="checkeds">打豆豆
         </div>

    data() {
            return {
                checkeds:['sleep','eat']
            }
        },

3. ラジオボタン

ラジオボタンに v-model 属性をバインドし、ラジオボタンの値が v-model の値と等しいかどうかでラジオボタンの選択/非選択を制御します。

        <div>
            <input type="radio" value="男" v-model="gender">男
            <input type="radio" value="女" v-model="gender">女
         </div>

    data() {
            return {
               gender:'女',
            }
        },

4. ドロップダウンリスト

選択ボディの v-model 属性をバインドし、オプションの値が v-model の値と等しいかどうかを判断して、選択されたオプションを決定します。

 <select name id v-model="from" class="form-control">
      <option value="en">英文</option>
      <option value="zh">中文</option>
      <option value="de">德语</option>
      <option value="ja">日语</option>
      <option value="ko">韩语</option>
    </select>

data() {
    return {
      from: "zh",
   };
  },

Vue 講義 6