vue怎麼反轉數組

vue中可以利用「v-for」指令和計算屬性來反轉數組，在語法「8231e44468e55002f20415c003f132c2」和「computed:{reverseDIV(){ return this.items.reverse()}}」。

本教學操作環境：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 } }

詳細：

#計算屬性將會被混入到Vue 實例中。所有 getter 和 setter 的 this 上下文會自動綁定為 Vue 實例。

注意如果你為一個計算屬性使用了箭頭函數，則 this 不會指向這個元件的實例，不過你仍然可以將其實例作為函數的第一個參數來存取。

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

計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。請注意，如果某個依賴 (例如非響應式屬性) 在該實例範疇之外，則計算屬性是不會被更新的。

主要是在不污染來源資料的情況下我們進行的一系列操作

【相關推薦：vue.js教學】

以上是vue怎麼反轉數組的詳細內容。更多資訊請關注PHP中文網其他相關文章！