Vue.jsのv-modelについて学ぼう

6399 ワード
JavaScript v-model Vue.js プログラミング JavaScript テキストリンク

はじめに

v-modelを使うことによって、
フォームの扱いがとても楽になってこのようなこともできます。

それでは、上の例のソースコードを見ていきましょう。

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
  <div id="app">
   <input type="number" v-model="number"> = {{number}}
  </div>
<script>
let app = new Vue({
    el: "#app",
    data: {
        number:0
        //0は初期値としているが数字なら0でなくても良い。
    }
})
</script>
</body>

</html>

解説

それでは、どのようなことをしているのかを解説していきます。

まず、el: "#app"の部分で、HTML内のid名appにアクセスしていきます。

次に、フォームの部分の構文を見ていきましょう。

input type="number"で、数字入力用のフォームに限定している。

続いて、data: { number:0 }の部分は、
inputタグ内のv-model="number" と {{number}}に連携しています。
(厳密にいうとinput type="number"とも関係はある。)

これらの連携によって、入力された数字の値を受け取り、表示しています。

追記：
v-model="number"と　{{number}}　と data: { number:0 }の中の、
numberの命名は基本的に自分でつけて大丈夫です。

次は文字を受け取ってみよう

まずは、こちらから見ていきましょう↓

次にソースコードを見ていきましょう。

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
  <div id="app">
   <input type="string" v-model="string"> = {{string}}
  </div>
<script>
let app = new Vue({
    el: "#app",
    data: {
        string:""
    }
})
</script>
</body>

</html>

解説

それでは、解説をしていきます。

基本的な動きは先ほどとなんら変わりはありません。
変わった部分は先ほどまで、numberだったものがstringに変わったくらいです。

あと、気をつけるポイントとしては、
data: { number:0 }からdata: { string:"" }に変わった部分です。
文字列なので、""は忘れないようにしましょう。

おわり

ご覧いただきありがとうございました。

また別の記事でお会いしましょう〜👋