Atribut mana bagi objek yang dipilih dalam vue

Vue ialah salah satu rangka kerja JavaScript bahagian hadapan paling popular hari ini. Ciri-cirinya seperti pengikatan data, komponenisasi dan pengoptimuman aplikasi satu halaman sangat menarik, menarik lebih ramai pembangun untuk menyertai ekosistemnya. Dalam pembangunan Vue, kita selalunya perlu memilih atribut tertentu objek untuk beroperasi. Artikel ini akan berkongsi cara memilih atribut pertama objek dalam Vue.

Terdapat banyak cara untuk memilih sifat objek dalam Vue Berikut ialah beberapa kaedah praktikal:

1. Pengecam titik

Pengecam titik boleh. mengakses sifat objek. Contohnya, dalam templat <template> Vue, kita boleh menggunakan sintaks berikut untuk mengakses sifat user objek name:

<template>
  <div>
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: "张三", age: 20 },
    };
  },
};
</script>

2. pengecam kurungan

Atau gunakan pengecam kurungan untuk mengakses sifat objek. Sebagai contoh, dalam templat Vue kita boleh menggunakan sintaks berikut untuk mengakses atribut user bagi objek name:

<template>
  <div>
    <p>{{ user["name"] }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: "张三", age: 20 },
    };
  },
};
</script>

Kaedah ini lebih sesuai untuk situasi di mana nama atribut mengandungi pembolehubah.

3. v-for

Dalam arahan v-for Vue, kita boleh menggunakan sintaks v-for="(item, index) in list" untuk mengakses item dan indeks senarai. Sebagai contoh, kita boleh menggunakan sintaks berikut untuk mengakses atribut kedua setiap pengguna dalam tatasusunan users:

<template>
  <div>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        {{ user[1] }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: "张三", age: 20 },
        { name: "李四", age: 22 },
        { name: "王五", age: 25 },
      ],
    };
  },
};
</script>

Dalam contoh ini, kami telah menggunakan sintaks v-for="(user, index) in users" untuk mengulangi users tatasusunan untuk setiap pengguna dalam objek pengguna, dan gunakan user[1] untuk mengakses sifat kedua bagi setiap objek pengguna (iaitu, sifat age).

4. Sifat dikira

Dalam sifat terkira Vue, kita boleh menggunakan sintaks JavaScript untuk memilih sifat objek. Sebagai contoh, kita boleh mengakses sifat kedua objek user menggunakan penyataan berikut:

computed: {
  secondProperty() {
    return this.user[1];
  },
},

Dalam contoh ini, kita mentakrifkan harta terkira secondProperty yang mengembalikan objek return this.user[1]; pernyataan > atribut kedua dan gunakan sintaks user dalam templat untuk memaparkan nilai atribut. {{ secondProperty }}

Ringkasan

Terdapat banyak cara untuk memilih atribut objek dalam Vue, termasuk pengecam titik, pengecam kurungan, v-for dan sifat yang dikira. Memahami kelebihan, kelemahan dan senario penggunaan kaedah ini boleh membantu kami mengendalikan operasi data dalam aplikasi Vue dengan lebih cekap.

Atas ialah kandungan terperinci Atribut mana bagi objek yang dipilih dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!