تغيير Style حسب قيمة تفاعلية
تقدر تربط style بكائن فيه قيم CSS مشتقة من الحالة
المثال داخل مشروع Vue 3 يدعم ملفات SFC
تطبيق الفكرة
بنحول الرقم إلى قيمة بيكسل للخط
ملف App.vue
<script setup>
import { ref } from "vue";
const size = ref(16);
</script>
<template>
<p :style="{ fontSize: size + 'px' }">Hello Vue</p>
<button @click="size += 2">Larger</button>
</template>النتيجة
حجم الخط بيزيد من 16 إلى 18 بيكسل بعد أول ضغطة