فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — v-text (v-text)

آخرین بروزرسانی: 1404/08/21

v-text (v-text)

اینجا «آموزش v-text» را خیلی ساده می گوییم. «v-text» دستور (Directive) برای جایگزینی متن یک تگ است. وقتی مقدارش عوض شود، متن داخل تگ فوراً عوض می شود.

تعریف و کاربرد

با v-text متن یک عنصر بروزرسانی می شود. اما دقت کن؛ متن قبلی و حتی فرزندان تگ حذف می شوند و متن جدید جایگزین می شود.

مثال پایه: جایگزینی متن پاراگراف

در این نمونه، متن «Old text.» با مقدار متغیر pText جایگزین می شود.

&lt;div id="app"&gt;
  &lt;p v-text="pText"&gt;Old text.&lt;/p&gt;
&lt;/div&gt;

مشاهده در ادیتور

چه زمانی از میان بری {{ }} استفاده کنیم؟

اگر فقط بخشی از متن باید عوض شود، بهتر است «میان بری متن (Text Interpolation)» یعنی {{ }} را استفاده کنی.

&lt;p&gt;امتیاز: {{ score }} از 20&lt;/p&gt;

مشاهده در ادیتور

گام های عملی

  1. عنصر هدف را انتخاب کن.
  2. v-text را روی آن بگذار.
  3. متن دلخواه را از داده ها اختصاص بده.

نکته: اگر نیاز به چند تکه متن داری، از آموزش v-text به همراه میان بری {{ }} استفاده کن.

هشدار: v-text هر فرزند داخلی را هم حذف می کند. اگر داخل تگ تگ های دیگری داری، محتاط باش.

جمع بندی سریع

  • v-text متن عنصر را کامل جایگزین می کند.
  • برای تغییر جزئی، از {{ }} استفاده کن.
  • فرزندان عنصر با v-text حذف می شوند.
  • روی هر تگی قابل استفاده است.

برای اسلات ها، صفحه v-slot را ببین. برای نمایش/مخفی سازی ساده، صفحه v-show را بررسی کن.