vue学習ノート:ラジオボックス、チェックボックス、ドロップダウンリストボックスのデータバインド操作
vueの重要な特性の一つはデータバインドであり、コアの命令はv-modelである.
使用する場合は以下の手順に分けられます.
ステップ1:dataプロパティでバインドされた値を定義する変数
ステップ2:ラベルにv-modelで変数をバインドする
ステップ3:補間式{{}}の方式にかかわらず、コードの中でthisを通過する.のように、変化した値を得ることができます.
簡単な例は次のとおりです.
ラジオボックスの操作
注意:v-modelは、ラジオボックスのvalueに対応する値をバインドします.
チェックボックスの操作:
ドロップダウン
ラジオボックス、チェックボックス、ドロップダウンボックスは、対応するラベルのvalueフィールドに対応する値に基づいてバインドされます.
使用する場合は以下の手順に分けられます.
ステップ1:dataプロパティでバインドされた値を定義する変数
ステップ2:ラベルにv-modelで変数をバインドする
ステップ3:補間式{{}}の方式にかかわらず、コードの中でthisを通過する.のように、変化した値を得ることができます.
簡単な例は次のとおりです.
vue
：
{{message}}
let vm = new Vue({
el: '#app',
data: {
message: ''
}
})
ラジオボックスの操作
vue
：{{checkVal}}
let vm = new Vue({
el: '#app',
data: {
checkVal: ''
}
})
注意:v-modelは、ラジオボックスのvalueに対応する値をバインドします.
チェックボックスの操作:
vue
：{{pickValues}}
let vm = new Vue({
el: '#app',
data: {
pickValues: [],
btnVal: ' '
},
methods: {
getVal: function () {
if (this.pickValues && this.pickValues.length) {
this.pickValues
.filter(p => p.indexOf('A') !== -1)
.forEach(a => alert(a));
}else{
alert(' ')
}
}
}
})
ドロップダウン
vue
：{{selectedVal}}
let vm = new Vue({
el: '#app',
data: {
selectedVal: ''
},
beforeMount: function () {
console.log('VUE ')
}
})
ラジオボックス、チェックボックス、ドロップダウンボックスは、対応するラベルのvalueフィールドに対応する値に基づいてバインドされます.