Vue.js 入門 フォーム部品のサンプル
Vue.jsで主なフォーム部品のサンプルを表示してみました。
概要
以下のフォーム部品を試しています。
- input type=”text” 1行テキスト
- textarea 複数行テキスト
- チェックボックス
- ラジオボタン
- セレクトボックス
- 複数セレクトボックス
ソース
ソースは以下となります。
form_sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vueのform部品サンプル</title>
</head>
<body>
<div id="app">
<h3>テキスト</h3>
<p>
{{ text }}<br>
<input type="text" v-model="text">
</p>
<hr>
<h3>テキストエリア</h3>
<p>
{{ textarea }}<br>
<textarea v-model="textarea"></textarea>
</p>
<hr>
<h3>チェックボックス</h3>
<input type="checkbox" v-model="check01">{{ check01 }}
<input type="checkbox" v-model="check02">{{ check02 }}
<hr>
<h3>ラジオボタン</h3>
<input type="radio" value="A" v-model="radio">A<br>
<input type="radio" value="B" v-model="radio">B<br>
<input type="radio" value="C" v-model="radio">C<br>
<span>{{ radio }}</span>
<hr>
<h3>セレクトボックス</h3>
<select v-model="select">
<option disabled="disabled">選択してください</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
</select><br>
{{ select }}
<hr>
<h3>複数セレクトボックス</h3>
<select v-model="multipleselect" multiple>
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
</select><br>
{{ multipleselect }}
<hr>
</div>
<script src="https://npmcdn.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
text: "1行テキストサンプル",
textarea: "複数行テキストサンプル",
check01: true,
check02: false,
radio: "",
select: "",
multipleselect: []
}
});
console.log(app.text);
</script>
</body>
</html>
実行結果
実行結果はこちら
解説
v-model属性を付与することで、Vueの特徴であるデータバインディングが設定されます。
データバインディングを設定することにより、画面表示とJavaScriptで変数の値の同期が取れます。
入力ボックスの<input type=”text” v-model=”text”>の値を変更すると、画面表示の{{ text }}が書き換わります。
JavaScriptからは、 console.log(app.text)にあるようにapp.textで値にアクセスできます。