How to reverse an array in vue

In vue, you can use the "v-for" instruction and calculated properties to reverse the array, the syntax "8231e44468e55002f20415c003f132c2" and "computed:{reverseDIV(){ return this.items.reverse()}}".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue's method of reversing an array

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

Method Two (computed attribute):

<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: Computed attribute

Type: { [key: string]: Function | { get: Function , set: Function } }

Details:

Computed properties will be mixed into the Vue instance. The this context of all getters and setters is automatically bound to the Vue instance.

Note that if you use an arrow function for a computed property, this will not point to the instance of the component, but you can still access its instance as the first parameter of the function.

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

The results of calculated properties will be cached and will not be recalculated unless the dependent responsive properties change. Note that if a dependency (such as a non-reactive property) is outside the scope of the instance, the computed property will not be updated.

Mainly a series of operations we perform without polluting the source data

[Related recommendations: vue.js tutorial]

The above is the detailed content of How to reverse an array in vue. For more information, please follow other related articles on the PHP Chinese website!