التعامل مع الأرقام بإستخدام v-model number
المعدل number بيحاول يحول قيمة الحقل لرقم بدل نص
المثال داخل مشروع Vue 3 يدعم ملفات SFC
تطبيق الفكرة
بنستخدم حقل رقمي ونحسب ضعف قيمته
ملف App.vue
<script setup>
import { ref } from "vue";
const quantity = ref(2);
</script>
<template>
<label>Quantity <input v-model.number="quantity" type="number"></label>
<p>{{ quantity * 2 }}</p>
</template>النتيجة
القيمة المعروضة بتبقى ضعف الرقم المكتوب
ملحوظة
الحقل الفاضي ممكن يرجع نص فاضي لذلك تحقق من القيم قبل الحفظ أو الحسابات الحساسة