متدها (methods)
اینجا «متدهای ویو» را می شناسیم. «متد (Method)» یعنی تابعی که کار انجام می دهد. مثل دکمه موبایل که با لمس، عملی انجام می دهد.
تعریف و کاربرد متدهای ویو
گزینه «methods» یک شیء از توابع است. این توابع روی نمونه ویو قرار می گیرند.
در قالب می توان متد را مستقیم صدا زد. برای رویدادها از v-on استفاده کن.
داخل کد جاوااسکریپت باید با this متد را صدا بزنی. چون this به نمونه ویو اشاره می کند.
نمونه کد: دکمه نمایش پیام
<template>
<div>
<h2 v-if="showMsg">{{ msg }}</h2>
<button @click="toggleMsg">تغییر وضعیت پیام</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World!';
showMsg: false;
};
},
methods: {
toggleMsg() {
this.showMsg = !this.showMsg;
}
}
};
<\/script>
گام های عملی
- کار لازم را به صورت تابع بنویس.
- تابع را داخل گزینه methods قرار بده.
- در قالب با v-on رویداد را به متد وصل کن.
نکته: در قالب، متد را مستقیم صدا بزن. اما در اسکریپت از this استفاده کن.
هشدار: از «Arrow Function» برای متدها پرهیز کن. چون this در دسترس نخواهد بود.
جمع بندی سریع
- methods مجموعه توابع نمونه است.
- در قالب، فراخوانی مستقیم انجام می شود.
- در کد، this لازم است.
- Arrow Function برای متد مناسب نیست.
منابع بیشتر: مرجع methods، راهنمای v-on، آموزش متدها.
برای مرور «متدهای ویو» دوباره به این صفحه برگرد. همچنین «گزینه data» و «گزینه های نمونه» را ببین.