はじめに
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:"" }に変わった部分です。
文字列なので、""は忘れないようにしましょう。
おわり
ご覧いただきありがとうございました。
また別の記事でお会いしましょう〜👋