Vue-এ অ্যারেগুলোর রিয়েক্টিভিটি

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

App.vue<template>
  <p v-for="elem in arr">
    {{ elem }}
  </p>
</template>

App.vue<template>
  <p v-for="elem in arr">
    {{ elem }}
  </p>
  <button @click="add">add</button>
</template>

App.vuemethods: {
  add: function() {
    this.arr.push('xxx');
  }
}

Задание 1

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে এই তালিকার শেষে একটি নতুন আইটেম যোগ হয়।

Задание 2

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার প্রথম আইটেমটি মুছে যায়।

Задание 3

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার শেষ আইটেমটি মুছে যায়。

Задание 4

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে প্রতিবার বাটনে ক্লিক করলে তালিকার শেষের আগের আইটেমটি মুছে যায়।

Задание 5

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে তালিকার আইটেমগুলি সাজানো顺序 হয়।

Задание 6

একটি বাটন দেওয়া আছে। একটি অ্যারে দেওয়া আছে। এই অ্যারের উপাদানগুলি একটি ul তালিকা আকারে প্রদর্শন করুন। এমন করুন যাতে বাটনে ক্লিক করলে তালিকার আইটেমগুলি উল্টো ক্রমে সাজে।