Vue.js入門 - データバインディング
データバインディング
Vue.jsのデータバインディングの基本を学びます。
タスク
テキストバインディング
v-modelを使ってテキスト入力とデータを双方向にバインディングします
チェックボックスバインディング
v-modelを使ってチェックボックスの状態を管理します
セレクトボックスバインディング
v-modelを使ってセレクトボックスの選択値を管理します
ヒント
v-modelディレクティブを使って、フォーム要素とデータを双方向にバインディングしましょう。
参考コード
// アプリケーションの作成
const app = Vue.createApp({
data() {
return {
// テキストバインディング用のデータ
text: '',
// チェックボックスバインディング用のデータ
checked: false,
// セレクトボックスバインディング用のデータ
selected: ''
}
}
})
// マウント
app.mount('#app')