vue.jsの基礎勉強7-フォーム入力について-

はじめに

今回はフォーム入力について勉強したので、その成果を記述していく。

See the Pen NWNWoxP by KKZoo (@kkzoo) on CodePen.

テキストエリアの記法について

テキストエリアは多量の文字を扱うときに使う。記法としてはマスタッシュ構文を用いるのではなくv-modelで呼び出す必要がある。

      <textarea v-model="message"></textarea>

  data: {
    message: 'Hello Vue.js'
  }

チェックボックスの記法について

チェックボックスは複数の選択肢から複数の値を得たい場合、もしくは単一の選択肢の真偽値を得る時に使う。

単体のチェックボックス

単体でチェックボックスを用いいる場合は真偽値が入力される。

      <!-- 単体の場合 -->
      <input type="checkbox" id=check v-model="checked">
      <label for="check">{{ checked }}</label>

  data: {
    checked: ''
  }

複数のチェックボックス

複数のチェックボックスを用いる場合、チェックされた箇所のvalueを配列に記憶するため、データは配列を用いる必要がある。

      <p>{{ colors }}</p>
      <input type="checkbox" id=red value="Red" v-model="colors">
      <label for="red">Red</label>
      <input type="checkbox" id=green value="Green" v-model="colors">
      <label for="red">Green</label>
      <input type="checkbox" id=blue value="Blue" v-model="colors">
      <label for="red">Blue</label>

  data: {
    colors: []
  }

ラジオボタンの記法について

ラジオボタンは複数の選択肢から単一の値を得たい場合に使う。

      <p>{{ gender }}</p>
      <input type="radio" id="male" value="male" v-model="gender">
      <label for="male">male</label>
      <input type="radio" id="female" value="female" v-model="gender">
      <label for="female">male</label>

  data: {
    gender: ''
  }

セレクトボックスの記法について

チェックボックスやラジオボタンでは扱いきれないデータ量になったときに、UIの見た目を整えるために使える。

単体選択のセレクトボックス

      <!-- 単一選択 -->
      <p v-model="selected">{{ selected }}</p>
      <select v-model="selected">
        <option dhisable value="">Please select one</option>
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
      </select>

  data:{
    selected: ''
  }

複数選択のセレクトボックス

      <!-- 複数選択 -->
      <p v-model="selected">{{ selectColors }}</p>
      <select v-model="selectColors" multiple>
        <option dhisable value="">Please select</option>
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
      </select>

  data:{
    selectColors: []
  }

修飾子について

フォーム入力にはv-on同様に修飾子がある。

修飾子の種類についてはここを参照ください。

.lazyについて

.lazyはフォームの入力が確定してからデータの更新を行う修飾子である。

      <!-- lazy -->
      <p>lazy
        <input type="text" v-model.lazy="message">
      </p>

  data:{
    message: ''
  }

.trimについて

Vue.jsのv-modelはテキストボックス内の値を全て記憶してしまう。そのため、前後の空白部分も余分に記憶してしまうおそれがある。その対策として.trim修飾子を用いることで自動的に文字列前後の空白を除去してデータに格納できる。

      <!-- trim -->
      <p>
        trim: 
        <input type="text" id="trim" v-model.trim="message">
      </p>
      <p>
        trimなし
        <input type="text" v-model="message">
      </p>

.numberについて

Vue.jsでは<input type="number">を用いてもその入力値を文字列として扱うため、number修飾子を用いることで数値に変換することができる。

      <!-- number -->
      <p>{{ count + 10 }}</p>
      <p>
        number: 
        <input type="number" v-model.number="count">
      </p>
      <p>
        numberなし: 
        <input type="number" v-model="count">
      </p>

  data:{
    number: 0
  }

終わりに

フォーム入力はウェブアプリ開発には必須項目だと思うので、今回得た知識は非常に有益だと思った。