v-text (v-text)
اینجا «آموزش v-text» را خیلی ساده می گوییم. «v-text» دستور (Directive) برای جایگزینی متن یک تگ است. وقتی مقدارش عوض شود، متن داخل تگ فوراً عوض می شود.
تعریف و کاربرد
با v-text متن یک عنصر بروزرسانی می شود. اما دقت کن؛ متن قبلی و حتی فرزندان تگ حذف می شوند و متن جدید جایگزین می شود.
مثال پایه: جایگزینی متن پاراگراف
در این نمونه، متن «Old text.» با مقدار متغیر pText جایگزین می شود.
<div id="app">
<p v-text="pText">Old text.</p>
</div>
چه زمانی از میان بری {{ }} استفاده کنیم؟
اگر فقط بخشی از متن باید عوض شود، بهتر است «میان بری متن (Text Interpolation)» یعنی {{ }} را استفاده کنی.
<p>امتیاز: {{ score }} از 20</p>
گام های عملی
- عنصر هدف را انتخاب کن.
v-textرا روی آن بگذار.- متن دلخواه را از داده ها اختصاص بده.
نکته: اگر نیاز به چند تکه متن داری، از آموزش v-text به همراه میان بری {{ }} استفاده کن.
هشدار: v-text هر فرزند داخلی را هم حذف می کند. اگر داخل تگ تگ های دیگری داری، محتاط باش.
جمع بندی سریع
v-textمتن عنصر را کامل جایگزین می کند.- برای تغییر جزئی، از
{{ }}استفاده کن. - فرزندان عنصر با
v-textحذف می شوند. - روی هر تگی قابل استفاده است.
برای اسلات ها، صفحه v-slot را ببین. برای نمایش/مخفی سازی ساده، صفحه v-show را بررسی کن.