Vue — محاسبه شده ها (computed)

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

قبلی: متدها (methods) بعدی: watch (watch)

محاسبه شده ها (computed)

اینجا درباره «محاسبه شده های ویو» حرف می زنیم. «محاسبه شده (Computed)» یعنی مقدارِ خودکار بر اساس داده ها. مثل معدل که از نمره ها حساب می شود.

تعریف «محاسبه شده های ویو» و کاربرد

گزینه «computed» یک شیء از ویژگی های محاسبه ای است. هر ویژگی مثل تابع بدون ورودی رفتار می کند و خروجی برمی گرداند.

خروجی «computed» کش می شود. بنابراین تا زمانی که وابستگی تغییر نکند، دوباره محاسبه نمی شود.

می توان «getter» و «setter» نوشت. پس ویژگی هم خواندنی است و هم قابل تنظیم.

نمونه کد: متن دکمه با computed

<template>
  <div>
    <h2 v-if="showMsg">{{ msg }}</h2>
    <button @click="showMsg = !showMsg">{{ btnText }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!',
      showMsg: false
    };
  },
  computed: {
    btnText() {
      if (this.showMsg) {
        return 'Hide';
      } else {
        return 'Show';
      }
    }
  }
};
<\/script>

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