Vue.js データバインディングの実践

データバインディングの説明

Vue.jsのデータバインディングは、データとUIを自動的に同期させる仕組みです。主なバインディングには以下の種類があります：

1. 一方向バインディング：データからUIへの一方通行のバインディング（v-bind）
2. 双方向バインディング：データとUIの双方向の同期（v-model）
3. 条件付きレンダリング：条件に応じて表示を切り替える（v-if, v-show）
4. リストレンダリング：配列データに基づいて要素を繰り返し表示（v-for）

データバインディングを使うことで、DOM操作を直接行わずに、データの変更に応じてUIが自動的に更新されます。

演習問題

初級問題

問題1: 以下のデータをv-bindを使って<img>タグのsrc属性にバインドしてください。

data() {
  return {
    imageUrl: 'https://example.com/image.jpg'
  }
}

問題2: 以下の配列をv-forを使ってリスト表示してください。

data() {
  return {
    items: ['りんご', 'バナナ', 'オレンジ']
  }
}

問題3: isVisibleがtrueの時だけ<div>表示されています</div>を表示するようにv-ifを使ってください。

data() {
  return {
    isVisible: true
  }
}

中級問題

問題4: 以下のフォーム入力とmessageデータを双方向バインディングしてください。

data() {
  return {
    message: ''
  }
}

問題5: 以下のオブジェクト配列をテーブルで表示してください。

data() {
  return {
    products: [
      { id: 1, name: 'ノート', price: 100 },
      { id: 2, name: 'ペン', price: 200 },
      { id: 3, name: '消しゴム', price: 50 }
    ]
  }
}

問題6: v-forとv-ifを組み合わせて、価格が150円以上の商品だけ表示してください（問題5のデータを使用）。

問題7: チェックボックスとisAgreedデータを双方向バインディングしてください。

data() {
  return {
    isAgreed: false
  }
}

問題8: ラジオボタンで選択された値をselectedOptionにバインドしてください。オプションは「option1」「option2」「option3」とします。

data() {
  return {
    selectedOption: ''
  }
}

問題9: セレクトボックスで選択された値をselectedFruitにバインドしてください。オプションは問題2のitems配列を使用します。

上級問題

問題10: コンポーネントのpropとして親からtitleを受け取り、v-bindで子コンポーネントに渡してください。

問題11: v-forでリストを表示する際に、各アイテムに一意のキーを設定してください（問題5のデータを使用）。

問題12: 算出プロパティを使って、問題5の商品データの合計金額を表示してください。

解答例

解答1:

データをv-bindを使って<img>タグのsrc属性にバインド。

<img v-bind:src="imageUrl" alt="画像">
<!-- または -->
<img :src="imageUrl" alt="画像">

解答2:

配列をv-forを使ってリスト表示。

<ul>
  <li v-for="item in items" :key="item">{{ item }}</li>
</ul>

解答3:

isVisibleがtrueの時だけ<div>表示されています</div>を表示するようにv-ifを使う。

<div v-if="isVisible">表示されています</div>

解答4:

フォーム入力とmessageデータを双方向バインディング。

<input type="text" v-model="message">
<p>入力内容: {{ message }}</p>

解答5:

オブジェクト配列をテーブルで表示。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="product in products" :key="product.id">
      <td>{{ product.id }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.price }}円</td>
    </tr>
  </tbody>
</table>

解答6:

v-forとv-ifを組み合わせて、価格が150円以上の商品だけ表示

<ul>
  <li v-for="product in products" :key="product.id" v-if="product.price >= 150">
    {{ product.name }} - {{ product.price }}円
  </li>
</ul>
<!-- または v-forとv-ifを同じ要素に使わない方法 -->
<template v-for="product in products">
  <div :key="product.id" v-if="product.price >= 150">
    {{ product.name }} - {{ product.price }}円
  </div>
</template>

解答7:

チェックボックスとisAgreedデータを双方向バインディング。

<input type="checkbox" v-model="isAgreed">
<label>同意する</label>
<p>同意状態: {{ isAgreed ? '同意済み' : '未同意' }}</p>

解答8:

ラジオボタンで選択された値をselectedOptionにバインド。

<div>
  <input type="radio" id="option1" value="option1" v-model="selectedOption">
  <label for="option1">オプション1</label>

  <input type="radio" id="option2" value="option2" v-model="selectedOption">
  <label for="option2">オプション2</label>

  <input type="radio" id="option3" value="option3" v-model="selectedOption">
  <label for="option3">オプション3</label>

  <p>選択されたオプション: {{ selectedOption }}</p>
</div>

解答9:

セレクトボックスで選択された値をselectedFruitにバインド。

<select v-model="selectedFruit">
  <option v-for="item in items" :key="item" :value="item">{{ item }}</option>
</select>
<p>選択されたフルーツ: {{ selectedFruit }}</p>

解答10:

コンポーネントのpropとして親からtitleを受け取り、v-bindで子コンポーネント。

親コンポーネント:

<child-component :title="pageTitle"></child-component>

data() {
  return {
    pageTitle: 'ダッシュボード'
  }
}

子コンポーネント:

props: {
  title: {
    type: String,
    required: true
  }
}

解答11:

v-forでリストを表示する際に、各アイテムに一意のキーを設定。

<ul>
  <li v-for="product in products" :key="product.id">
    {{ product.name }} - {{ product.price }}円
  </li>
</ul>

解答12:

算出プロパティを使って、問題5の商品データの合計金額を表示。

computed: {
  totalPrice() {
    return this.products.reduce((sum, product) => sum + product.price, 0);
  }
}

<p>合計金額: {{ totalPrice }}円</p>