Mula Pantas VUE3: Kira data menggunakan sifat yang dikira

Permulaan Pantas VUE3: Kira data menggunakan atribut yang dikira

VUE ialah rangka kerja bahagian hadapan berdasarkan corak MVVM dan ia telah berkembang menjadi salah satu rangka kerja bahagian hadapan yang paling popular di dunia. VUE3 ialah versi terbaharu VUE, menyediakan pembangun dengan prestasi dan pengalaman pembangunan yang lebih baik. Dalam VUE3, sifat yang dikira ialah alat yang sangat berguna yang boleh mengira nilai data dengan mudah dan mengemas kini secara automatik apabila data dikemas kini.

Artikel ini akan memperkenalkan cara menggunakan sifat yang dikira untuk mengira data dan menunjukkan beberapa kes penggunaan praktikal.

1. Pengenalan kepada atribut yang dikira

Atribut yang dikira merujuk kepada atribut yang digunakan dalam templat dan nilainya dikira. Sifat yang dikira biasanya digunakan untuk operasi kompleks data mengikat, seperti menapis data, memformat data, dsb. Sifat yang dikira adalah reaktif dan nilainya dikemas kini secara automatik apabila data yang mereka bergantung pada berubah.

2. Gunakan sifat yang dikira

Dalam VUE3, sifat yang dikira dilaksanakan dengan mentakrifkan fungsi. Sifat yang dikira boleh ditakrifkan dengan menggunakan kata kunci yang dikira dalam sifat komponen. Berikut ialah contoh mudah:

templat:

<div>{{message}}</div>

skrip:

export default {
    name: 'Demo',
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        message() {
            return `Hello, ${this.firstName} ${this.lastName}!`;
        }
    }
}

Dalam contoh di atas, mesej atribut yang dikira ditakrifkan dan nilai atribut ini disambungkan Rentetan yang diperoleh oleh firstName dan lastName.

3. Gunakan kes bagi sifat yang dikira

a data yang memenuhi syarat tertentu. Elemen tatasusunan keadaan:

templat:

<div v-for="item in filteredItems">{{item}}</div>

skrip:

export default {
    name: 'Demo',
    data() {
        return {
            items: ['apple', 'banana', 'orange'],
            filterKey: 'a'
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.indexOf(this.filterKey) > -1);
        }
    }
}

Dalam contoh di atas, item pembolehubah ditakrifkan, dan kemudian dengan mentakrifkan atribut filteredItems yang dikira, Tapis elemen tersebut yang nilainya mengandungi filterKey dalam tatasusunan item.

b. Memformat data

Sifat yang dikira juga boleh digunakan untuk memformat data Berikut ialah contoh penggunaan sifat yang dikira untuk memformat tarikh ke dalam rentetan:

templat :<. 🎜>

<div>{{formattedDate}}</div>

export default {
    name: 'Demo',
    data() {
        return {
            date: new Date()
        };
    },
    computed: {
        formattedDate() {
            return `${this.date.getFullYear()}-${(this.date.getMonth() + 1).toString().padStart(2,'0')}-${this.date.getDate().toString().padStart(2,'0')}`;
        }
    }
}

Atas ialah kandungan terperinci Mula Pantas VUE3: Kira data menggunakan sifat yang dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!