" et "calculed:{reverseDIV(){return this.items .inverse() }}"."/> " et "calculed:{reverseDIV(){return this.items .inverse() }}".">

Maison >interface Web >Questions et réponses frontales >Comment inverser un tableau dans vue

Comment inverser un tableau dans vue

青灯夜游
青灯夜游original
2022-01-10 16:07:054320parcourir

Vue peut utiliser l'instruction "v-for" et les propriétés calculées pour inverser le tableau, la syntaxe "8231e44468e55002f20415c003f132c2" et "calculed:{reverseDIV(){return this. éléments .reverse()}}".

Comment inverser un tableau dans vue

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn