アプリケーションのデータをDOMと結びつけること
テキストボックスの双方向データバインディング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<form>
<label for="name">文字を入力してください:</label>
<input type="text" id="name" v-model="inputText" />
</form>
<div>入力した文字:{{inputText}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
inputText: ''
}
});
ラジオボタンの双方向データバインディング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<label for="tokyo">東京</label>
<input type="radio" id="tokyo" value="東京" v-model="city" />
<br />
<label for="osaka">大阪</label>
<input type="radio" id="osaka" value="大阪" v-model="city" />
<br />
<label for="okinawa">沖縄</label>
<input type="radio" id="okinawa" value="沖縄" v-model="city" />
<p>お住まいの都市:{{city}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
city: '東京'
}
});
チェックボックス(単一)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<form>
<label for="agree">クッキーに同意する</label>
<input type="checkbox" id="agree" v-model="agree" />
</form>
<div>回答:{{agree}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
agree: true
}
});
チェックボックス(複数)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<form>
<div>カートに追加してください</div>
<label for="onepiece">ワンピース</label>
<input type="checkbox" id="onepiece" value="ワンピース" v-model="comics">
<label for="naruto">ナルト</label>
<input type="checkbox" id="naruto" value="ナルト" v-model="comics">
<label for="drstone">Dr stone</label>
<input type="checkbox" id="drstone" value="ドクターストーン" v-model="comics">
</form>
<p>カート:{{comics}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
comics: []
}
});
セレクトボックス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<form>
<label for="bloodtype">おまえの血は何型だ</label><br />
<select id="bloodtype" v-model="bloodtype">
<option>A</option>
<option>B</option>
<option>O</option>
<option>AB</option>
</select>
</form>
<p>血:{{bloodtype}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
bloodtype: ''
}
});
