LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@yuki4839

【写真とコード付き】Vue.jsで書く「v-model」双方向データバインディングの方法【６選】

Posted at

はじめに

この記事はVue.jsの基本は抑えられている程で、話を進めていきます。もしVue.jsを初めて触ると言う方は、こちらの記事を参照していただければと思います。

⬇️**【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】**
https://qiita.com/yuki4839/items/62f40564e3f4c8dbfc51

さて今回は、主にフォームタグに活用する v-model ディレクティブについて、詳しく解説していきます。

早速いきましょう。



実行環境

使用ツール、デバイスはこちら

  • Google chrome
  • Mac OS Catalina
  • Visual Studio Code

また今回使用するディレクトリ階層はこちら。

ディレクトリ階層
─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js

各ファイルの初期値はこちら。

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <div id="web">
    <p>
      {{ context }}
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>
style.css
/* 出力結果を見やすくするためのスタイルです */
body {
  background-color: #add8e6;
}

# web {
  background-color: #fff;
  margin: 20px;
  padding: 20px;
  width: 300px;
}
main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})

現時点での出力結果はこちら。

スクリーンショット 2020-12-12 21.13.46.png



v-model

まず v-model ディレクティブについて簡単に説明すると、inputタグなどで入力された文字を、リアルタイムで Vue.js 側に渡す事ができるディレクティブになります。

text

v-model ディレクティブで最も基本的な処理が、inputタグのtextタイプでの入力した値を、 Vue.js 側に渡す処理になります。

文章で伝えるよりも、コードを見て理解してもらうのが早いと思いますので、まずは実際のコードをご覧ください。

index.html
<!-- headタグ省略 -->
<body>

  <div id="web">
    <p>
      <input type="text" v-model="message">
    </p>

    <!-- 確認用に Vue.js の値を表示 -->
    <pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
main.js
var web = new Vue({
	el: '#web',
  data: {
  	message: 'Hello Vue.js!'
  }
})

ポイントは、タグの属性に v-model を使用して、属性値の部分に Vue.js で定義したキーを代入する部分です。

これによって、inputタグで入力した値が、リアルタイムで Vue.js の message に反映されるようになります。

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 22.16.41.png

では、inputタグに「Hello World!」と入力してみます。
その結果がこちら。

スクリーンショット 2020-12-13 22.17.10.png

このように、inputタグなどで書いた値が、リアルタイムで Vue.js 側に反映されることを、双方向データバインディング と言います。

そして、これを実現するディレクティブが、v-model ディレクティブと言うことになります。



textarea

次にtextareaタグでの 双方向データバインディング の書き方はこちら。

index.html
<!-- headタグ省略 -->
<body>

  <div id="web">
    <textarea v-model="message">{{ message }}</textarea>

    <pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
main.js
var web = new Vue({
	el: '#web',
  data: {
  	message: 'Hello Vue.js!'
  }
})

ポイントは、textareaタグの場合はタグの中に、マスタッシュ構文 で挿入する必要がある点です。(これが無ければ正常に動作する事ができません。)

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 22.25.13.png

では、textareaタグに「Hello World!」と入力してみます。
その結果がこちら。

スクリーンショット 2020-12-13 22.25.39.png

因みに "\n" とあるのは改行になります。



checkbox

次はチェックボックスでの 双方向データバインディング についてです。まず実際のコードは以下の通りになります。

index.html
<body>

  <div id="web">
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">{{ checked }}</label>
	<pre>{{ $data }}</pre>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
main.js
var web = new Vue({
  el: '#web',
  data: {
    checked: false
  }
})

ポイントは、checkboxタイプのinputタグに v-model="checked" を挿入している部分になります。これによって、チェックが入れられると、Vue.js のcheckedが true にリアルタイムで書き換えられます。(逆も同じ)

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 23.28.29.png

ではチェックを入れます。

スクリーンショット 2020-12-13 23.28.40.png

そしてチェックを外すと、先ほどの false と同じ状態になります。



radio

次はラジオボタンでの 双方向データバインディング についてです。まず実際のコードは以下の通りになります。

index.html
<div id="web">
	<select v-model="selected">
		<option disabled value="">Please select one</option>
		<option>Red</option>
		<option>yellow</option>
		<option>Green</option>
	</select>
	<p>{{ selected }}</p>
</div>
main.js
var web = new Vue({
  el: '#web',
  data: {
    selected: ''
  }
})

ポイントは、selectタグに v-model 属性を使用する事です。これにより、選択した値が Vue.js にリアルタイムで書き換えられます。

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 22.56.08.png

では選択をします。
まずはRedです。

スクリーンショット 2020-12-13 22.56.18.png

続いてyellowです。

スクリーンショット 2020-12-13 22.56.50.png

最後にGreenです。

スクリーンショット 2020-12-13 22.57.01.png

このように選択した値が、代入される仕組みを作る事ができます。



option

最後に v-model に関するオプションをいくつか解説していきます。

lazy

こちらは 双方向データバインディング を行うタイミングを、遅延させる事ができるオプションです。

実際のコードはこちら。

index.html
<!-- headタグ省略 -->
<body>

  <div id="web">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
main.js
var web = new Vue({
  el: '#web',
  data: {
    message: ''
  }
})

ポイントは、v-model に .lazy と追記する事です。これにより、入力した値からカーソルが離れるまで、双方向データバインディング がされないようにする事ができます。

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 23.03.19.png

次に「Hello Vue.js!」と入力。

スクリーンショット 2020-12-13 23.03.55.png

ご覧のように、カーソルが離れない限りは、双方向データバインディング がされません。

カーソルを離した結果がこちら。

スクリーンショット 2020-12-13 23.05.31.png

このように、値の確定を遅延させる事ができます。



trim

こちらは 双方向データバインディング を行う際に、空白スペースを除去する事ができるオプションです。(半角全角どちらも)

実際のコードはこちら。

index.html
<!-- headタグ省略 -->
<body>

  <div id="web">
    <input type="text" v-model.trim="message">
    <p>{{ message }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>

</body>
main.js
var web = new Vue({
  el: '#web',
  data: {
    message: ''
  }
})

ポイントは先程と同じく、v-model に .trim と追記する事です。これにより、入力した値の前後の空白を、双方向データバインディング がされる際に除去できます。

では動作確認です。
最初の画面はこちら。

スクリーンショット 2020-12-13 23.09.48.png

次に前後に空白を付けて、「Hello Vue.js!」と入力。

スクリーンショット 2020-12-13 23.10.16.png

このように、空白を除去する事ができます。



まとめ

以上が v-model ディレクティブによる、双方向データバインディング の記述方法になります。もう一度まとめておくと、以下の通りになります。

  • text
    • input type="text" v-model="message"
  • textarea
    • textarea v-model="message"
      (タグ内にマスタッシュ構文)
  • checkbox
    • input type="checkbox" id="checkbox" v-model="checked"
  • radio
    • select v-model="selected"
  • option
    • lazy
      • input type="text" v-model.lazy="message"
    • trim
      • input type="text" v-model.trim="message"

ぜひ実際にコードを書いて見てください！
最後まで読んでいただき、ありがとうございました！





筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?