最初に、モデル レイヤーの対応するデータが v-model にバインドされたデータに割り当てられますが、ビュー レイヤーがトリガーされてバインドされたデータが変更されると、モデル レイヤーのデータも変更されます。
5.1 入力ボックスのアプリケーション
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="mes" />{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>操作結果： 最初はモデルレイヤーの「ラッキー」が入力ボックスに転送されており、ページを開くと入力ボックスには「ラッキー」と表示されます。ビュー層が変更されると、入力データが mes に渡され、モデル層のデータも変更されます。
5.2 複数行テキストコントロールアプリケーション
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<textarea v-model="mes"></textarea>{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "lucky",
},
})
</script>
</body>
</html>操作結果:
5.3 ラジオボタン
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
性别：
<input type="radio" value="男" v-model="mes" />男
<input type="radio" value="女" v-model="mes"/>女
<hr/>
性别：{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: "222",
},
})
</script>
</body>
</html>実行結果: モデル層から開始し、mes データが 222 で、それを各ラジオ ボタンにバインドします。ラジオ ボタン自体の値も 222 に等しい場合、ラジオ ボタンは選択された状態になります。ビュー層で、誰かが値「男性」のラジオボタンをクリックすると、値「男性」が mes に渡され、モデル層の mes もそれに応じて変更されます。
5.4 ドロップダウンボックス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../plugins/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<select v-model="mes">
<option value="" disabled>请选择</option> <!-- disabled表示该选项被禁用-->
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<hr />
value:{
{mes}}
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
mes: '',
},
})
</script>
</body>
</html>操作結果:
PS: mes の初期値が A の場合、ページにアクセスすると、ドロップダウン ボックスは自動的に A を選択します。バインド後、モデル層のデータの初期値がビュー層のデータと同じである場合、このオプションを選択したことと同じになるためです。