Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set-View.js-php.cn

Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set

王林

Lepaskan： 2023-07-24 19:22:47

asal

2356 orang telah melayarinya

Kaedah dan contoh menggunakan fungsi Vue.set untuk menambah sifat secara dinamik

Dalam Vue, jika kita ingin menambah sifat secara dinamik pada objek sedia ada, biasanya kita menggunakan fungsi Vue.set untuk mencapainya. Fungsi Vue.set ialah kaedah global yang disediakan oleh Vue.js, yang boleh memastikan kemas kini responsif apabila menambah sifat. Artikel ini akan memperkenalkan penggunaan Vue.set dan memberikan contoh khusus.

Pertama sekali, dalam Vue, kami biasanya menggunakan pilihan data untuk mengisytiharkan data reaktif. Sifat yang diisytiharkan dalam pilihan data akan dijejaki secara automatik oleh Vue.js untuk perubahan dan paparan akan dikemas kini secara automatik berdasarkan perubahan. Walau bagaimanapun, jika kami cuba menambah sifat baharu secara terus pada objek sedia ada, Vue tidak akan dapat mengesan perubahan itu, menyebabkan paparan tidak dikemas kini dengan betul. Pada masa ini, kita perlu menggunakan Vue.set dan bukannya kaedah penambahan atribut asli.

Penggunaan Vue.set sangat mudah Ia menerima tiga parameter: objek sasaran, nama atribut dan nilai atribut. Selepas memanggil fungsi Vue.set, Vue akan menambah sifat responsif pada objek sasaran dan memastikan paparan dikemas kini dengan betul. Sekarang, mari kita tunjukkan penggunaan Vue.set melalui contoh khusus.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="addProperty">添加属性</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: '原始属性'
        }
      },
      methods: {
        addProperty() {
          Vue.set(this, 'newProperty', '新属性值');
        }
      }
    })
  </script>
</body>
</html>

Salin selepas log masuk

Tata Vue dalam contoh di atas mengisytiharkan objek data dan memulakan sifat mesej dalam data. Dalam halaman, kami memaparkan nilai atribut mesej dan menyediakan butang Apabila butang diklik, kaedah addProperty dipanggil.

Dalam kaedah addProperty, kami menggunakan fungsi Vue.set untuk menambahkan atribut newProperty secara dinamik pada contoh Vue, yang nilainya ialah "nilai hartanah baharu". Apabila kami mengklik butang, sifat baharu akan ditambahkan pada contoh Vue, dan perubahan akan dijejaki secara automatik oleh Vue supaya paparan dikemas kini dengan betul. Anda boleh melihat pada halaman bahawa nilai atribut baharu juga dipaparkan dengan betul.

Ringkasan

Menggunakan fungsi Vue.set boleh memastikan atribut yang ditambah secara dinamik akan dijejak dengan betul oleh Vue.js dan mengemas kini paparan. Dalam pembangunan sebenar, jika kita perlu menambah atribut secara dinamik pada objek, jangan gunakan kaedah penambahan atribut asli secara langsung Adalah disyorkan untuk menggunakan fungsi Vue.set. Ini memastikan pengemaskinian data yang responsif dan dengan itu pemaparan halaman yang betul.

Saya harap contoh mudah ini dapat membantu anda memahami dan menguasai penggunaan fungsi Vue.set. Dalam pembangunan sebenar, apabila menghadapi keperluan yang sama, anda boleh menggunakan fungsi Vue.set secara fleksibel untuk menambah atribut secara dinamik.

Atas ialah kandungan terperinci Kaedah dan contoh menambah atribut secara dinamik menggunakan fungsi Vue.set. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!