Comment inverser un tableau dans vue

Vue peut utiliser l'instruction "v-for" et les propriétés calculées pour inverser le tableau, la syntaxe "

" et "calculed:{reverseDIV(){return this. éléments .reverse()}}".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Méthode vue pour inverser le tableau

Première méthode :

<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>

Méthode deux (attribut calculé) :

<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>

Description : Attribut calculé

Type : { [clé : chaîne ] : Function | { get: Function, set: Function } }

Détails :

Les propriétés calculées seront mélangées dans les instances Vue. Le contexte this de tous les getters et setters est automatiquement lié à l'instance Vue.

Notez que si vous utilisez une fonction flèche pour une propriété calculée, celle-ci ne pointera pas vers l'instance du composant, mais vous pourrez toujours accéder à son instance en tant que premier paramètre de la fonction.

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

Les résultats des propriétés calculées seront mis en cache et ne seront pas recalculés à moins que les propriétés réactives dépendantes ne changent. Notez que si une dépendance (telle qu'une propriété non réactive) est en dehors de la portée de l'instance, la propriété calculée ne sera pas mise à jour.

Principalement une série d'opérations que nous effectuons sans polluer les données sources

[Recommandations associées : Tutoriel vue.js]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!