vueで配列を反転する方法

vue では、「v-for」命令と計算されたプロパティ、構文「

」および「computed:{」を使用して配列を逆にすることができます。 reverseDIV(){ return this.items.reverse()}}」。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

配列を反転する Vue のメソッド

メソッド 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>

メソッド2 (計算された属性):

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

説明: 計算された属性

タイプ: { [キー: 文字列]: 関数 | { get: 関数, set: Function } }

Details:

計算されたプロパティが Vue インスタンスに混合されます。すべてのゲッターとセッターの this コンテキストは、自動的に Vue インスタンスにバインドされます。

計算プロパティにアロー関数を使用する場合、これはコンポーネントのインスタンスをポイントしませんが、関数の最初のパラメーターとしてそのインスタンスにアクセスできることに注意してください。

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

計算されたプロパティの結果はキャッシュされ、依存する応答プロパティが変更されない限り再計算されません。依存関係 (非リアクティブ プロパティなど) がインスタンスのスコープ外にある場合、計算されたプロパティは更新されないことに注意してください。

主に、ソース データを汚染することなく実行する一連の操作です。

[関連する推奨事項: vue.js チュートリアル]

以上がvueで配列を反転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。