vue怎么反转数组-前端问答-PHP中文网

vue怎么反转数组

青灯夜游

发布： 2022-01-10 16:07:05

原创

4667人浏览过

vue中可以利用“v-for”指令和计算属性来反转数组，语法“<div v-for="item in reverseDIV">”和“computed:{reverseDIV(){return this.items.reverse()}}”。

vue怎么反转数组

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

vue反转数组的方法

方法一：

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

登录后复制

方法二（计算属性）：

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

说明：计算属性

类型：{ [key: string]: Function | { get: Function, set: Function } }