v-model
双方向データバインディングができる
オブジェクト <-> テンプレート間で双方向にデータ反映すること
code:html
<div id="app">
<form>
<label for="name">氏名:</label>
<input type="text" id="name" v-model="myName" />
</form>
<div>
こんにちは、{{ myName }}さん!
</div>
</div>
code:js
Vue.createApp({
data() {
return {
myName: 'ゲスト'
}
}
}).mount('#app')
v-modelを使用するときはvalue属性は使わない
value属性が優先されるため、わかりにくくなる
同様に、checked属性、selected属性も使用しない方がよい
Yoshihiro Yamada. Quick Master VueJS 3 Sokushu (Japanese Edition). WingsProject. Kindle Edition.