vueで配列を反転する方法-フロントエンドQ&A-php.cn

vueで配列を反転する方法

青灯夜游

リリース： 2022-01-10 16:07:05

オリジナル

4324 人が閲覧しました

vue では、「v-for」命令と計算されたプロパティ、構文「
」および「computed:{」を使用して配列を逆にすることができます。 reverseDIV(){ return this.items.reverse()}}」。

vueで配列を反転する方法

このチュートリアルの動作環境: 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 インスタンスにバインドされます。

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