<template>
  <div>
    <h1>Two-Way Binding Example</h1>
    <input v-model="message" placeholder="Type something..." />
    <p>You typed: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

<template>
  <div>
    <h1>Checkbox Example</h1>
    <input type="checkbox" v-model="isChecked" />
    <p>Checkbox is {{ isChecked ? 'checked' : 'not checked' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

<template>
  <div>
    <h1>Radio Button Example</h1>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption" />
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="selectedOption" />
    <label for="option2">Option 2</label>

    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

<template>
  <div>
    <h1>Select Example</h1>
    <select v-model="selected">
      <option disabled value="">Please select an option</option>
      <option value="Option 1">Option 1</option>
      <option value="Option 2">Option 2</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  }
};
</script>

<template>
  <div>
    <h1>Two-Way Binding with Object</h1>
    <input v-model="user.name" placeholder="Enter your name" />
    <input v-model="user.age" type="number" placeholder="Enter your age" />
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: null
      }
    };
  }
};
</script>

<template>
  <div>
    <h1>Validation Example</h1>
    <input v-model="email" placeholder="Enter your email" />
    <p v-if="!isValidEmail">Invalid email address</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    };
  },
  computed: {
    isValidEmail() {
      return this.email.includes('@');
    }
  }
};
</script>