جلسه بیست و چهارم آموزش فریم ورک vue.js : آموزش فیلترها در vue.js

آموزش فیلترها در vue.js

در جلسه قبلی از آموزش vue.js با مفهوم custom Directive ها آشنا شدیم، در این جلسه با آموزش فیلترها در vue.js با پین سایت همراه باشید

فیلتر چیست؟

فیلترها یکسری syntax هستند در vue.js، که بهمون کمک میکنند که روی خروجی مون یکسری تغییرات انجام بدهیم و خروجی رو به نحو خاصی به کاربر نمایش بدهیم.

مثلا به کاربر کلمه hello  که بصورت حروف کوچک نوشته شده، در خروجی به صورت حروف بزرگ نمایش دهیم.

نکته : فیلتر ها در خروجی ای که به کاربر نمایش داده می شود تغییر اعمال میکنند و کاری به data اصلی ندارد.

استفاده از property بنام filters

Syntax کلی استفاده از filter

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

دو نوع نحوه تعریف داریم:

1- تعریف فیلتر به صورت لوکال
2- تعریف به صورت public
مثال : میخواهیم فیلتری ایجاد کنیم که وقتی داخل input کلمه ای را وارد میکنیم ، در خروجی حرف اول آن را به صورت بزرگ به نمایش بگذارد.

App.Vue
{{ message | capitalize }}

– نمایش فیلتر به صورت local

App.Vue
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

– نمایش فیلتر به صورت public

 

Main.js

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

1- به مثال زیر که فیلتر در آن به صورت لوکال تعریف شده دقت کنید:

App.vue
<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>{{ title }}</h1>
        <hr>
        <p>{{ title | toUpper }}</p>
      </div>
      <div class="clearfix"></div>
      <hr>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      title: "Filters in Vue",
    };
  },
  filters: {
    toUpper(value) {
      return value.toUpperCase();
    }
  },

};
</script>

همانطور که در بالا مشاهده میکنید، با استفاده از ویژگی ای به نام filters، اقدام به تعریف فیلتر مورد نظرمون مینماییم.
سپس فانکشن مورد نظر را مینویسیم مثلا در بالا خواستیم که مقدار title امون را در خروجی با حروف بزرگ نمایش دهد.

نحوه استفاده از فیلتر:

کافیه بعد از آیتمی که میخواهیم فیلتر روش اعمال بشه علامت | ( پایپ) که نشانه استفاده از فیلتر هست را به همراه نام فانکشن مورد نظر استفاده کنیم؛
در خروجی کد بالا: Filters in vue را همه با حروف بزرگ به نمایش خواهد گذاشت.

2- تعریف فیلتر به صورت public

کافیه که بیایم و در فایل main.js فانکشنی که میخواهیم را به صورت زیر تعریف کنیم:
مثلا در مثال زیر میایم و تمام حروف را میگیم که به صورت کوچک درخروجی چاپ نماید.


Main.js
import Vue from 'vue';
import App from './App.vue';


Vue.filter('toLower', function (value) {
  return value.toLowerCase();
});

new Vue({
  el: '#app',
  render: h => h(App)
})

نحوه استفاده در کامپوننت هم به صورت زیر می شود:

App.vue
<p>{{ title | toLower }}</p>

در خروجی تمام حروف title را به صورت کوچک به نمایش میگذارد.

استفاده از فیلترها به صورت زنجیروار:

{{ message | filterA | filterB }}

مثال :
میتونیم بگیم که اول متنمون را به صورت کوچک نمایش بده و بعد به صورت بزرگ

<p>{{ title | toLower | toUpper }}</p>

البته چون فیلترها برعکس هم هستند ، در بالا آخرین فیلتر را در خروجی نمایش میده ولی هنگامی که چند تا فیلتر مختلف داریم میتوانیم، همه فیلترها را اعمال کنیم.

در مثال دیگه ای : آرایه ای از نام ها را داریم که میخواهیم این نام ها را بر اساس مقدار ورودی فیلتر کنیم؛

یعنی مثلا توی input اگر زدیم m ، تمام کسانی که اول نامشون m هست را بیاد و نمایش دهد.

-> برای اینکار یک input و لیستی از ul-li که حاوی آرایه ای از نام هایی است که تعریف کردیم را به نمایش میگذاریم.

در اینجا به خاطر performance دیگه نمیتونیم از | استفاده کنیم چون هر بار میخواد render کند و این کارایی را پایین می آورد،

بنابراین برای اینکار می آییم و از computed ها استفاده میکنیم.

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
      <div class="form-group">
        <label>filter names :</label>
        <input type="text" class="form-control" v-model="filterText">
      </div>
      <ul>
        <li v-for="name in filteredNames" :key="name">{{ name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      names: ["mohammad", "milad", "iman", "elnaz", "reza", "shirin"],
      filterText: ""
    };
  },

  computed: {
    filteredNames() {
      return this.names.filter(element => {
        return element.match(this.filterText);
      });
    }
  }
};
</script>

همان طور که در بالا مشاهده میکنید:

1- ابتدا یک data ای را بنام filterText تعریف میکنیم

2- سپس به input امون بایند میکنیم که بدونه قرار است چه چیزی را فیلتر کند،

3- در آخر با استفاده از computed یک فانکشن مینویسیم که بیاد نامی که با آن filterText، match هست را برامون فیلتر کند

در خروجی میبنیم که با زدن m، در input تمام نام هایی که داخلشون m دارد را فیلتر میکند.

فیلتر readmore: یعنی متن با طول بیش از 10 کلمه رو … بگذار

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید