【Vue.js】v-bind, v-model, v-for, v-if演習問題

演習問題

### 初級問題 #### 問題1: v-bindの基本使用

<div id="app">
  <img <!-- ここにコードを追加 -->>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        imageUrl: 'https://vuejs.org/images/logo.png',
        imageAlt: 'Vue.jsロゴ'
      }
    }
  }).mount('#app');
</script>

#### 問題2: v-modelの双方向バインディング

<div id="app">
  <input <!-- ここにコードを追加 -->>
  <p>入力値: {{ message }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: ''
      }
    }
  }).mount('#app');
</script>

#### 問題3: v-forによるリスト表示

<div id="app">
  <ul>
    <!-- ここにコードを追加 -->
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        items: ['りんご', 'バナナ', 'オレンジ']
      }
    }
  }).mount('#app');
</script>

### 中級問題 #### 問題4: v-bindと動的クラス

<div id="app">
  <div <!-- ここにコードを追加 -->>
    クラスバインディング
  </div>
  <button @click="toggleActive">切り替え</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        isActive: false
      }
    },
    methods: {
      toggleActive() {
        this.isActive = !this.isActive;
      }
    }
  }).mount('#app');
</script>

#### 問題5: v-modelとチェックボックス

<div id="app">
  <label>
    <input type="checkbox" <!-- ここにコードを追加 -->>
    同意する
  </label>
  <p>状態: {{ isChecked ? 'ON' : 'OFF' }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        isChecked: false
      }
    }
  }).mount('#app');
</script>

#### 問題6: v-forとオブジェクトのレンダリング

<div id="app">
  <ul>
    <!-- ここにコードを追加 -->
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        user: {
          name: '山田太郎',
          age: 30,
          email: 'taro@example.com'
        }
      }
    }
  }).mount('#app');
</script>

#### 問題7: v-ifによる条件分岐

<div id="app">
  <p>得点: {{ score }}点</p>
  <!-- ここにコードを追加 -->
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        score: 75
      }
    }
  }).mount('#app');
</script>

#### 問題8: v-forとv-ifの組み合わせ

<div id="app">
  <ul>
    <!-- ここにコードを追加 -->
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        products: [
          { id: 1, name: 'ノートパソコン', inStock: true },
          { id: 2, name: 'スマートフォン', inStock: false },
          { id: 3, name: 'タブレット', inStock: true }
        ]
      }
    }
  }).mount('#app');
</script>

#### 問題9: v-modelとセレクトボックス

<div id="app">
  <select <!-- ここにコードを追加 -->>
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <p>選択されたフルーツ: {{ selectedFruit }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        selectedFruit: 'apple'
      }
    }
  }).mount('#app');
</script>

### 上級問題 #### 問題10: 動的なスタイルバインディング

<div id="app">
  <div <!-- ここにコードを追加 -->>
    動的スタイル
  </div>
  <button @click="changeStyle">スタイル変更</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        styleObj: {
          color: 'white',
          backgroundColor: 'blue',
          padding: '10px'
        }
      }
    },
    methods: {
      changeStyle() {
        this.styleObj.backgroundColor =
          this.styleObj.backgroundColor === 'blue' ? 'red' : 'blue';
      }
    }
  }).mount('#app');
</script>

#### 問題11: v-model修飾子

<div id="app">
  <input <!-- ここにコードを追加 -->>
  <p>入力値 (typeof): {{ typeof numericValue }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        numericValue: 0
      }
    }
  }).mount('#app');
</script>

#### 問題12: v-forとアイテム削除

<div id="app">
  <ul>
    <!-- ここにコードを追加 -->
  </ul>
  <button @click="addItem">アイテム追加</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        items: [
          { id: 1, text: 'アイテム1' },
          { id: 2, text: 'アイテム2' },
          { id: 3, text: 'アイテム3' }
        ]
      }
    },
    methods: {
      addItem() {
        const newId = this.items.length + 1;
        this.items.push({ id: newId, text: `アイテム${newId}` });
      },
      removeItem(index) {
        this.items.splice(index, 1);
      }
    }
  }).mount('#app');
</script>

解答例

### 初級問題解答 **問題1:**

<img :src="imageUrl" :alt="imageAlt">

**問題2:**

<input v-model="message">

**問題3:**

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

### 中級問題解答 **問題4:**

<div :class="{ active: isActive }">

**問題5:**

<input type="checkbox" v-model="isChecked">

**問題6:**

<li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>

**問題7:**

<p v-if="score >= 60">合格</p>
<p v-else>不合格</p>

**問題8:**

<li v-for="product in products" :key="product.id">
  <template v-if="product.inStock">{{ product.name }}</template>
</li>

**問題9:**

<select v-model="selectedFruit">

### 上級問題解答 **問題10:**

<div :style="styleObj">

**問題11:**

<input v-model.number.trim="numericValue">

**問題12:**

<li v-for="(item, index) in items" :key="item.id">
  {{ item.text }}
  <button @click="removeItem(index)">削除</button>
</li>