v-modelの書き方
<input type="text" v-model="mag">
<div>{
{
mag}}</div>
data(){
return {
mag:'HELLO WORLD'
}
},
v モデルの原理
2 つのステップに分かれています:
1. v-bind は値属性をバインドします。
2. v-on は入力イベントをバインドします。
<div>{
{
mag}}</div>
<input type="text" :value="mag" @input="change">
data(){
return {
mag:'HELLO WORLD'
}
},
methods:{
change(e){
this.mag = e.target.value
console.log(e)
}
}
v-model チェックボックス (チェックボックス)
シングルチェック
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{
{
checked }}</label>
data(){
return {
checked:true,
}
},
複数のチェックボックス (配列で受け取ります)
<input type="checkbox" value="小明" v-model="checkedNames" />
<label for="小明">小明</label>
<input type="checkbox" value="小李" v-model="checkedNames" />
<label for="小李">小李</label>
<input type="checkbox" value="小陈" v-model="checkedNames" />
<label for="小陈">小陈</label>
data(){
return {
checkedNames:[]
}
},
v-model ラジオ ボタン (ラジオ)
<input type="radio" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {
{
picked }}</span>
data(){
return {
picked:''
}
},
v-model選択ボックス（選択）
単一の選択
<select v-model="selected">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span>Selected: {
{
selected }}</span>
data(){
return {
selected:'2',
}
},
複数の選択肢
<select v-model="selecteds" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span>Selected: {
{
selecteds }}</span>
data(){
return {
selecteds:[]
}
},
修飾子
。怠け者
デフォルトでは、v-model はリアルタイムで更新されます。リアルタイムで更新したくない場合は、.lazy 修飾子を追加する必要があります。この機能は、イベントがフォーカスを失ったときに更新することです。
<input v-model.lazy="mag" />
data(){
return {
mag:'mag'
}
},
。番号
ユーザーの入力値を数値型に自動的に変換したい場合は、数値修飾子を v-model に追加できます。
<input v-model.number="age" type="text" />
。トリム
ユーザーが入力した先頭および末尾の空白文字を自動的にフィルタリングしたい場合は、trim 修飾子を v-model に追加できます。
<input v-model.trim="msg" />