عرض محتوى بشرط بإستخدام v-if
ال v-if بتضيف العنصر أو تشيله من DOM حسب الشرط
المثال داخل مشروع Vue 3 يدعم ملفات SFC
تطبيق الفكرة
بنبدل بين رسالة ترحيب ورسالة طلب تسجيل الدخول
ملف App.vue
<script setup>
import { ref } from "vue";
const loggedIn = ref(false);
</script>
<template>
<p v-if="loggedIn">Welcome</p>
<p v-else>Please Sign In</p>
<button @click="loggedIn = !loggedIn">Toggle</button>
</template>النتيجة
الرسالة بتتبدل مع الضغط على الزر