Bagaimana untuk membalikkan tatasusunan dalam vue

Vue boleh menggunakan arahan "v-for" dan sifat yang dikira untuk membalikkan tatasusunan, sintaks "

" dan "dikira:{reverseDIV() { return this.items.reverse()}}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kaedah tatasusunan terbalik Vue

Kaedah 1:

<template>
    <div>
        <div v-for="item in Array.prototype.reverse.call(items)">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data(){
            return{
                items:[1,2,3,4]
            }
        },
 
    }
</script>

Kaedah dua (atribut yang dikira):

<template>
    <div>
        <div v-for="item in reverseDIV">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data() {
            return {
                items: [1, 2, 3, 4]
            }
        },
        computed: {
            reverseDIV() {
                return this.items.reverse()
            }
        }
    }
</script>

Penerangan: Atribut yang dikira

Jenis: { [key: string]: Fungsi | : Fungsi, set: Fungsi } }

Butiran:

Sifat yang dikira akan dicampurkan ke dalam tika Vue. Konteks semua getter dan setter ini terikat secara automatik pada tika Vue.

Perhatikan bahawa jika anda menggunakan fungsi anak panah untuk sifat yang dikira, ini tidak akan menunjuk kepada tika komponen, tetapi anda masih boleh mengakses tikanya sebagai parameter pertama fungsi.

computed: {
  aDouble: vm => vm.a * 2
}

Hasil sifat yang dikira akan dicache dan tidak akan dikira semula melainkan sifat responsif bergantung berubah. Ambil perhatian bahawa jika kebergantungan (seperti sifat tidak reaktif) berada di luar skop kejadian, sifat yang dikira tidak akan dikemas kini.

Terutamanya satu siri operasi yang kami lakukan tanpa mencemarkan data sumber

[Cadangan berkaitan: tutorial vue.js]

Atas ialah kandungan terperinci Bagaimana untuk membalikkan tatasusunan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!