テキストのv-model

上でほとんど書いてしまいましたが、これ↓です。

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

変数宣言は忘れずに。

data() {
  return {
    value: '',
  }
},

<input type="number" v-model="value">

<input type="number" v-model.number="value">

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

チェックボックスのv-model

テキストの場合と同様です。 テストサイトではこのページで利用しました。

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

チェックが入るとvalueにtrueが、チェックがないとfalseが入ります。

この↓ように「value」属性を設定した場合はチェックした際にその値が入ります。

<input type="checkbox" value="りんご" v-model="value">

実はこれを利用してすごい面白いことができます。

<input type="checkbox" value="りんご" v-model="fruits">
<input type="checkbox" value="みかん" v-model="fruits">
<input type="checkbox" value="バナナ" v-model="fruits">

<input type="checkbox" true-value="ベジタリアン" false-value="雑食" v-model="value">

ラジオボタンのv-model

チェックボックスと書き方は同じです。 テストサイトではこのページで利用しました。

<input type="radio" value="りんご" v-model="fruits">
<input type="radio" value="みかん" v-model="fruits">
<input type="radio" value="バナナ" v-model="fruits">

この例だと選択したもの「value」が「fruits」に入ります。

v-bindを使うと「value」に変数も設定できるみたいです。

<input type="radio" v-bind:value="apple" v-model="fruits">

この場合、この↓「apple」の値が入ります。

data() {
  return {
    apple: '',
  }
},

<select>のv-model

これも似たような感じです。 テストサイトではあっちゃこっちゃで利用しました。

<select v-model="fruits">

<option>でvalueを設定しなかった場合は、中身のテキストが入ります。 この↓場合は「りんご」がはいります。

<option>りんご</option>

valueを指定した場合はvalueの値が入ります(この↓例だと「apple」)

<option value="apple">りんご</option>

ラジオボタン同様にv-bindを使うこともできます。

<option v-bind:value="apple">りんご</option>

テストサイトの「属性」は、APIから属性一覧を取得して、v-forでループ処理しています。

まとめ

今回はユーザからの入力を受け取るv-modelを勉強しました。

「data return」の部分で変数名を宣言して、<input>タグに「v-model="(変数名)"」と書くだけです。

v-modelで受け取った値に対して動的処理をする場合は前回の記事のv-bindやv-ifが使えるのでそっちを見てください。

Vue.jsのテンプレート構文とv-modelが分かれば、大概のことはできると思います。

僕は概ね書きたいことが書けるようになったので、次はAPIの勉強をしようと思います。