Vue v- অ্যালগরিদমের জন্য
প্লেইন জাভাস্ক্রিপ্টের সাথে, আপনি একটি অ্যারের উপর ভিত্তি করে HTML উপাদান তৈরি করতে চাইতে পারেন। আপনি একটি ফর-লুপ ব্যবহার করছেন, এবং ভিতরে আপনাকে উপাদানগুলি তৈরি করতে হবে, সেগুলি ঠিক করতে হবে এবং তারপরে আপনার পৃষ্ঠায় প্রতিটি উপাদান যুক্ত করতে হবে৷ এবং এই উপাদানগুলি ক্রম পরিবর্তনের সাথে প্রতিক্রিয়া করে না।
Vue এর সাথে, আপনি যে HTML উপাদানটি একটি তালিকা হিসাবে তৈরি করতে চান তা দিয়ে শুরু করুন, Vue উদাহরণের মধ্যে একটি v-এর জন্য বৈশিষ্ট্য হিসাবে সারিটি নির্দিষ্ট করুন এবং Vue কে বাকিগুলি যত্ন নিতে দিন৷ এবং v-for দিয়ে তৈরি উপাদানগুলি যখন অর্ডার পরিবর্তন হয় তখন স্বয়ংক্রিয়ভাবে আপডেট হয়।
তালিকা রেন্ডারিং
Vue-তে তালিকা রেন্ডারিং করা হয় v-for পদ্ধতি ব্যবহার করে, যাতে একাধিক HTML উপাদান একটি ফর-লুপ দিয়ে তৈরি করা যায়।
নিচে v-এর তিনটি সামান্য ভিন্ন উদাহরণ ব্যবহার করা হচ্ছে।
একটি অ্যারের আইটেমগুলির উপর ভিত্তি করে একটি তালিকা প্রদর্শন করুন।
<ol>
<li v-for="x in manyFoods">{{ x }}</li>
</ol>আপনার নিজস্ব Vue সার্ভার পান
একটি সারিতে লুপ
বিভিন্ন চিত্র প্রদর্শন করতে একটি অ্যারের মাধ্যমে লুপ করুন:
Vue ইনস্ট্যান্সে একটি অ্যারের উপর ভিত্তি করে খাবারের ছবি প্রদর্শন করুন।
<div>
<img v-for="x in manyFoods" v-bind:src="x">
</div>অবজেক্টের অ্যারের মাধ্যমে লুপ করুন
অবজেক্টের একটি অ্যারের মাধ্যমে লুপ করুন এবং অবজেক্টের বৈশিষ্ট্যগুলি প্রদর্শন করুন:
Vue ইভেন্টে একটি অ্যারের উপর ভিত্তি করে বিভিন্ন ধরণের খাবারের ছবি এবং নাম প্রদর্শন করুন।
<div>
<figure v-for="x in manyFoods">
<img v-bind:src="x.url">
<figcaption>{{ x.name }}</figcaption>
</figure>
</div>কোড পান
একটি অ্যারে উপাদানের সূচী জাভাস্ক্রিপ্ট ফর-লুপগুলিতে খুব দরকারী। সৌভাগ্যবশত, Vue-তে v-for ব্যবহার করার সময় আমরা সূচক নম্বরও পেতে পারি।
v-এর সাথে সূচক নম্বর পেতে, আমাদের বন্ধনীতে দুটি কমা-বিচ্ছিন্ন অভিব্যক্তি পাস করতে হবে: প্রথম অভিব্যক্তিটি হবে অ্যারে উপাদান, এবং দ্বিতীয় অভিব্যক্তিটি হবে সেই অ্যারের উপাদানটির সূচক।
Vue ইভেন্টে 'manyFoods' অ্যারেতে উপাদানগুলির সূচক নম্বর এবং খাদ্যের নাম প্রদর্শন করুন।
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x }}" <br>
</p>যদি অ্যারের উপাদানগুলি বস্তু হয়, আপনি অ্যারে উপাদান কোড এবং অ্যারে উপাদান থেকে তথ্য উভয়ই প্রদর্শন করতে পারেন:
অ্যারে 'manyFoods'-এ বস্তু থেকে অ্যারে উপাদান সূচক নম্বর এবং পাঠ্য প্রদর্শন করুন।
<p v-for="(x, index) in manyFoods">
{{ index }}: "{{ x.name }}", url: "{{ x.url }}" <br>
</p>ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
প্রশিক্ষণ:
Vue-তে তালিকা রেন্ডারিং করা যেতে পারে যাতে একাধিক HTML উপাদান একটি অ্যারের উপর ভিত্তি করে তৈরি হয়।
এটি সম্ভব করে তোলে Vue প্রক্রিয়া কি?
v-_____