كيفية استخدام Vue

يسمح لنا التوجيه v-model Vue بإنشاء ارتباط ثنائي الاتجاه. تعلم كيف تستخدمه

الv-modelيسمح لنا التوجيه Vue بإنشاء ارتباط ثنائي الاتجاه.

يمكنك ربط عنصر إدخال نموذج على سبيل المثال ، وجعله يغير خاصية بيانات Vue عندما يغير المستخدم محتوى الحقل:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

معدِّلات التوجيه المفيدة

لإجراء تحديث للنموذج عند حدوث حدث التغيير ، وليس في أي وقت يضغط فيه المستخدم على مفتاح ، يمكنك استخدامv-model.lazyبدلا من مجردv.model.

العمل مع حقول الإدخال ،v-model.trimمفيد لأنه يزيل المسافات البيضاء تلقائيًا.

وإذا قبلت رقمًا بدلاً من سلسلة ، فتأكد من استخدامهv-model.number.

الخصائص المتداخلة

لنفترض أن لديك عربة تسوق ، ولديك مكون يحتوي على نموذج لإضافة منتج:

<template>
  <div class="">
    <h1>Add Product</h1>
    <label>Name</label>: <input>
    <label>Description</label>: <textarea></textarea>
    <button @click="addProduct">Add</button>
  </div>
</template>

<script> export default { name: ‘AddProduct’, data() { return { product: { name: ‘’, description: ‘’ } } }, methods: { addProduct() { console.log(this.product) } } } </script>

لجعل النموذج يقوم بتحديث الخصائص الداخلية لملفproductقيمة الدولة التي تستخدمهاproduct.*:

<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>

تحميل مجانيكتيب Vue


المزيد من دروس vue: