ফিল্টারস এর মাধ্যমে ডাটা ফরম্যাটিং

Vue.js ফিল্টারস একটি খুবই শক্তিশালী ফিচার যা আপনাকে ডাটা রেন্ডার করার সময় সহজেই ফরম্যাটিং, প্রক্রিয়াকরণ বা পরিবর্তন করার সুবিধা দেয়। ফিল্টারস মূলত টেমপ্লেটের মধ্যে ডেটার মান পরিবর্তন করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি ডেটার উপস্থাপনা পরিবর্তন করতে পারেন, যেমন তারিখ ফরম্যাট পরিবর্তন, ক্যাপিটালাইজেশন, সংখ্যা ফরম্যাটিং ইত্যাদি।

Vue.js ফিল্টারস সাধারণত {{ value | filterName }} সিনট্যাক্স ব্যবহার করে প্রয়োগ করা হয়।

১. ফিল্টারস এর মৌলিক ব্যবহার

Vue.js এ ফিল্টারস ব্যবহার করার জন্য, আপনাকে একটি | (পাইপ) সিম্বল ব্যবহার করতে হবে, যা ফিল্টার এবং ডেটা মধ্যে একটি সংযোগ স্থাপন করে।

উদাহরণ:

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue!'
    },
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  });
</script>

এখানে, capitalize ফিল্টারটি message ডেটা প্রপার্টির প্রথম অক্ষরটি বড় বানায়। টেমপ্লেটে {{ message | capitalize }} দিয়ে এটি প্রদর্শিত হবে।

২. ডেটা ফরম্যাটিং ফিল্টারস

Vue.js এর মাধ্যমে আপনি বিভিন্ন ধরনের ডেটা ফরম্যাটিং করতে পারেন যেমন তারিখ ফরম্যাট, সংখ্যা ফরম্যাট, স্ট্রিং এর ক্ষেত্রে ক্যাপিটালাইজেশন ইত্যাদি।

উদাহরণ ১: তারিখ ফরম্যাটিং

আপনি একটি তারিখ ফিল্টার তৈরি করতে পারেন যা একটি তারিখকে নির্দিষ্ট ফরম্যাটে রেন্ডার করবে।

<div id="app">
  <p>{{ currentDate | formatDate }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      currentDate: new Date()
    },
    filters: {
      formatDate: function(value) {
        if (!value) return ''
        return value.toLocaleDateString()  // Date কে স্থানীয় ফরম্যাটে রেন্ডার করা
      }
    }
  });
</script>

এখানে, currentDate এর মান স্থানীয় তারিখ ফরম্যাটে রেন্ডার হবে।

উদাহরণ ২: মুদ্রা ফরম্যাটিং

একটি সংখ্যা কে মুদ্রা ফরম্যাটে পরিবর্তন করার জন্য আপনি একটি ফিল্টার ব্যবহার করতে পারেন।

<div id="app">
  <p>{{ amount | currency }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      amount: 12345.67
    },
    filters: {
      currency: function(value) {
        return '$' + value.toFixed(2)  // মুদ্রা হিসেবে মান প্রদর্শন করা
      }
    }
  });
</script>

এখানে, amount ফিল্টার করা হচ্ছে যাতে এটি একটি মুদ্রা ফরম্যাটে প্রদর্শিত হয়।

৩. একাধিক ফিল্টার ব্যবহার

Vue.js তে আপনি একাধিক ফিল্টার একসাথে ব্যবহার করতে পারেন। একাধিক ফিল্টার একটি পাইপলাইন হিসেবে কাজ করে, অর্থাৎ প্রথম ফিল্টারটি একটি মান পরিবর্তন করবে এবং দ্বিতীয় ফিল্টারটি তা আরো পরিবর্তন করবে।

উদাহরণ:

<div id="app">
  <p>{{ message | capitalize | exclamation }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello, vue'
    },
    filters: {
      capitalize: function(value) {
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      exclamation: function(value) {
        return value + '!'  // শেষে এক্সক্লেমেশন চিহ্ন যোগ করা
      }
    }
  });
</script>

এখানে, প্রথমে capitalize ফিল্টারটি message কে কেপিটালাইজ করবে এবং তারপর exclamation ফিল্টারটি এক্সক্লেমেশন চিহ্ন যোগ করবে।

৪. ফিল্টারসের সীমাবদ্ধতা

• ফিল্টারস শুধুমাত্র টেমপ্লেটের মধ্যে ব্যবহৃত হয়: Vue.js ফিল্টারস শুধুমাত্র টেমপ্লেটের মধ্যে ব্যবহৃত হতে পারে, সেগুলি মেথডের মধ্যে বা JavaScript কোডের মধ্যে ব্যবহার করা যায় না।
• পারফরম্যান্স: ফিল্টারস ছোট কাজের জন্য উপযুক্ত, তবে বড় এবং জটিল লজিকের জন্য মেথড বা কম্পিউটেড প্রপার্টি ব্যবহার করা উচিত।

৫. বুস্টেড ফিল্টারস: কম্পিউটেড প্রপার্টি বা মেথড ব্যবহার করা

যখন আপনার ফিল্টার আরো জটিল বা বেশি হিসাবপ্রবণ হয়, তখন Vue.js কম্পিউটেড প্রপার্টি অথবা মেথড ব্যবহার করার পরামর্শ দেয়। কারণ ফিল্টারসের মাধ্যমে অনেক জটিল গণনা বা কার্যক্রম করা হয় না, বরং কম্পিউটেড প্রপার্টি বা মেথড এসব কাজের জন্য উপযুক্ত।

উদাহরণ: কম্পিউটেড প্রপার্টি ব্যবহার করা

<div id="app">
  <p>{{ computedCurrency }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      amount: 12345.67
    },
    computed: {
      computedCurrency: function() {
        return '$' + this.amount.toFixed(2)
      }
    }
  });
</script>

এখানে computedCurrency একটি কম্পিউটেড প্রপার্টি যা amount এর মানকে মুদ্রা হিসেবে ফরম্যাট করে।

সারাংশ

• ফিল্টারস Vue.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ডেটা ফরম্যাটিং বা প্রক্রিয়াকরণ করতে সহায়তা করে।
• এটি টেমপ্লেটে ডেটা প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়, যেমন তারিখ ফরম্যাটিং, সংখ্যা ফরম্যাটিং, স্ট্রিং কনভার্সন ইত্যাদি।
• একাধিক ফিল্টার একসাথে ব্যবহার করা যায় এবং Vue.js এর ফিল্টারস সাধারণত ছোট প্রক্রিয়াকরণের জন্য উপযুক্ত, বড় লজিকের জন্য কম্পিউটেড প্রপার্টি বা মেথড ব্যবহার করা উচিত।