v-modelディレクティブ
v-〇〇の種類が多くて頭がパンクしそうです。脳をオンプレミスからクラウドに移行したいことスバルです。今回はv-modelについて学習していきます。
v-modelとは
dataオブジェクトのプロパティの値とinputタブの入力値や選択値のデータを連動することができる。
(参考: https://qiita.com/shizen-shin/items/d9f8c8c9a74618c0b326)
form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成できる。双方向バインディングとも呼ばれる。
ユーザーの入力に応じて等のイベントに基づいて、バインディングしたデータをリアクティブデータに反映させる処理が肝。
注意点
任意の form 要素にある value、checked、または selected 属性の初期値を無視する。
使用例
case) textarea
HTML
<div id = "app">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
js
var app = new Vue({
el:'#app',
data:{
message: ""
}
})
textareaに入力した内容が、messageの部分に表示される。
case) radio button
・<input type="radio" v-model="プロパティ名" value="固有の値">
・プロパティ名:'チェックしたい要素のvalue'
html
<div id="app">
<div>
■ラジオボタンとv-model
<br><input type="radio" id="good" v-model="radio" value="good">
<label for="good">good</label>
<input type="radio" id="normal" v-model="radio" value="normal">
<label for="normal">normal</label>
<input type="radio" id="bad" v-model="radio" value="bad">
<label for="bad">bad</label>
<p>プロパティの状態: {{radio}}</p>
</div>
</div>
var app = new Vue({
el:'#app',
data:{
//ラジオボタン
radio: 'bad'
}
})
修飾子
.lazy
inputに入力して、エンターなどを押した後に値が反映される。
遅延評価するときは大体lazy
<input v-model.lazy="msg">
.number
ユーザの入力を Number として自動的に型変換したいときに使う。
<input v-model.number="age" type="number">
#上下矢印とともに、数字が際限なく表示される
.trim
ユーザーが入力した空白を取り除くことができる。
<input v-model.trim="msg">
v-bindとv-modelの違い
v-bind は Model の値を HTML コンポーネントに反映（出力）します。HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。
一方、v-model は Model と View（HTML）の双方向に影響します。 HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。
入力内容がモデルに反映されるのがv-modelらしい。束縛か、相思相愛ってことか。
<div id="app">
v-bind[{{ data1 }}]
<div><input type="text" v-bind:value="data1"></div>
<br><br>
v-model[{{ data2 }}]
<div><input type="text" v-model="data2"></div>
</div>
var app = new Vue({
el: '#app',
data: {
data1: "data1",
data2: "data2"
}
})
data1に何かを入力しても、初期値から変化はない。
一方で、data2に何かを入力したら、何かに沿って変化する。
