<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

Hello Vue!

<template>
  <div>
    <a :href="url">Click Here</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org'
    };
  }
};
</script>

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

- Apple
- Banana
- Cherry

<template>
  <div :class="dynamicClass">This is a dynamic class example</div>
</template>

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

<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

<template>
  <div>
    <input v-model="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}</p>
  </div>
</template>

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

<template>
  <div>
    <h1 :class="{ active: isActive }">Dynamic Class Example</h1>
    <p v-if="isActive">This text is visible when active.</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  color: green;
}
</style>